响应式Web设计——自定义网页字体

生气的散人 发布于 2013/03/07 17:18
阅读 3K+
收藏 13

多年来我们一直被迫使用一组单调乏味的Web安全字体。当网页设计中确实需要一些优雅的字体时,我们通常都是使用图片来替代,并对元素使用text-indent规则将实际的文本移出视口范围。

曾有一些稍微高级点的备选方案,来为网页增加更加个性的字体效果。sIFR(http://www.mikeindustries.com/blog/sifr/)和Cufón(http://cufon.shoqolate.com/generate/)都使用Flash和JavaScript来重建文本元素,然后使用自定义字体来显示内容。但是在响应式设计中,我们力求精简、语义和内容优先,所以多余的图片和臃肿的代码应该尽可能避免。幸好,CSS3提供了一种自定义网页字体的方法,用它可以描绘美丽的新时代。

@font-face规则在CSS2中已经存在(但随后在CSS 2.1中被删除)。IE 4甚至对其提供了部分支持(真的,不骗你)!那现在都CSS3了,怎么还提它呢?

因为它又回来了!@font-face已经被重新引入CSS3字体模块(http://www.w3.org/TR/css3-fonts)。过去在网页中使用自定义字体一直很麻烦,直到最近才开始有了一些真正可行的网页字体解决方案。但浏览器厂商对不同的字体格式和具体实现仍在争论。如Embedded OpenType(EOT)字体是Internet Explorer的首选格式(其他浏览器都不支持),其他浏览器更钟爱常见的TrueType格式(TTF),还有Scalable Vector Graphics (SVG)以及Web Open Font Format (WOFF)。使用@font-face为网页设定字体时,可谓喜忧参半。我们先说忧吧……

在某一个通用的字体格式一统天下之前,我们需要为同样的字体提供多种格式以兼容不同的浏览器。和竞争激烈的视频格式一样,必须等到某种字体格式明显胜出的时候,才能删除对其他方案的支持。

喜的是,现在给每种浏览器设置对应的自定义字体都很简单。我们来试试!

我们将用@font-face规则改进一下And the winner isn't...网站版面。

首先我们得有字体。网上有很多很棒的字体资源站点,有免费的也有收费的。虽然Google也提供了免费的网页字体,且基本上都可使用@font-face规则(www.google.com/webfonts),但我个人最喜欢Font Squirrel(www.fontsquirrel.com)。另外还有Typekit (www.typekit.com) 和Font Deck(www.fontdeck.com)上也有一些非常优秀的付费字体。

enter image description here

巧合的是,我在网站中使用的来自Font Squirrel的字体都是免费的(我承认我抠门 :))。这些字体包括Bebas Neue、Bitstream Vera Sans和Collaborate Thin。从Font Squirrel上下载的@font-face包是一个ZIP文件,里面包含该字体各种格式的文件(WOFF、TTF、EOT 和SVG),以及一个用来演示字体调用规则的stylesheet.css文件。例如,使用Bebas Neue字体的规则如下:

@font-face { font-family:'BebasNeueRegular'; src: url('BebasNeue-webfont.eot'); src: url('BebasNeue-webfont.eot?#iefix') format('embedded- opentype'), url('BebasNeue-webfont.woff') format('woff'), url('BebasNeue-webfont.ttf') format('truetype'), url('BebasNeue-webfont.svg#BebasNeueRegular') format('svg'); font-weight: normal; font-style: normal;}

和浏览器私有前缀的原理类似,浏览器会根据自身特性应用列表中能识别的样式,忽略无法识别的样式。用这种方法能保证无论什么浏览器都有一个可用字体。

上面这段代码对“复制粘贴党”来说很方便,但需要注意字体文件的存放路径。比如我一般会将ZIP包中的字体文件存放在一个专门的fonts文件夹,该文件夹与css文件夹平级。因此我将上面这段代码拷贝到样式表文件中之后,还需要对文件路径做点修改,具体如下所示:

@font-face { font-family:'BebasNeueRegular'; src: url('../fonts/BebasNeue-webfont.eot'); src: url('../fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/BebasNeue-webfont.woff') format('woff'), url('../fonts/BebasNeue-webfont.ttf') format('truetype'), url('../fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg'); font-weight: normal; font-style: normal;}

接下来就是给相关样式设置正确的字体和粗细(如果需要)。此处我想将导航链接文字的字体修改为Bebas Neue:

nav ul li a { height:42px; line-height:42px; text-decoration: none; text-transform: uppercase; font-family:'BebasNeueRegular'; font-size:1.875em;/*30 ÷ 16 */ color: black;}

导航栏在浏览器中变成了如下效果:

enter image description here

替换字体之后一般还需要修改字体大小。不过我们之前已经将字体换算过程写在了注释里,那就很容易依此修改了。如果设计图和CSS代码都使用同一款字体,那会有一个额外的好处,你可以直接从设计图中获取字体大小。比如我们例子中的设计图对“EVERY YEAR…”开头的这段文字大小设定为102像素,所以直接使用百试不爽的“目标元素尺寸÷上下文元素尺寸=百分比尺寸”公式,将文字大小转换为相对尺寸:

#content h1 {  font-family:Arial,Helvetica,Verdana, sans-serif; text-transform: uppercase; font-family:'BebasNeueRegular'; font-size:6.375em;/* 102 ÷ 16 */}

将所有相关样式中的font-family和font-size声明全部修改之后,(使用WOFF字体格式的)网页在Google Chrome浏览器中的效果如下图所示:

enter image description here

网站的整体效果尚不完美,但现在字体完美还原了设计图中的效果。为了对比效果,我们看看iPad 2(iOS 4.2之后的版本支持TTF字体格式)上的显示效果:

enter image description here

本文摘自:《响应式Web设计:HTML5和CSS3实战》

读者评论:

“看完这本书,我必须得说,这时间花得太值了。作者通过一个虚构的网站,让你掌握了所有细节。”
“响应式Web设计具有巨大的潜在商业价值,这本书把响应式Web设计讲得非常透彻。”
——亚马逊读者评论

本书内容简介:

本书堪称学习响应式Web设计的难得佳作。它不仅全面、细致、图文并茂地介绍了响应式设计相关的技术,比如媒体查询、流式布局、弹性媒体和弹性字体等等,还把近几年来Web设计领域公认的最佳设计理念有机地融入到了实例当中,比如移动先行(Mobile First)、渐进增强、平稳退化、无障碍设计等等。更加难得的是,本书以设计跨屏幕的网页(响应式设计)为出发点,以点带面,把如今Web设计领域两大标准的最新版本——HTML5和CSS3也纳入其中,读者在掌握先进设计方法的同时也能掌握最新的设计技术(比如使用新的HTML5结构化语义标记、嵌入媒体、响应式视频,以及CSS3的新选择器、特效、过渡、变形和动画等等),从而可以免除重复学习新标准之苦,让自己一步跨入Web设计领域的最前沿。无论你想学习响应式Web设计,还是学习HTML5和CSS3的实际应用,本书都能满足你的需要,是毋庸置疑的明智之选。

加载中
0
赵海斌
赵海斌
收下了。
0
TAT_johnny
TAT_johnny
最近在看在线电子版, 不错
0
木田妮子
木田妮子

  您好,我想请问一下 怎么找到文中所提到的 @font-face 页面呢  我试图寻找过 但是没找到 能教我一下吗  谢谢

   文中第一张图

0
大冒险
大冒险
 这书最近在图书馆看到啦  非常棒 响应式入门学习最佳推荐, 但是如果把后面html5部分削减一点的话会更好, 个人觉得html5部分太啰嗦而且都是一些浅基础, 应该把重点放在响应式这一块!!!!
返回顶部
顶部