Question

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

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

5.6.1　@font-face规则

@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为网页设定字体时，可谓喜忧参半。我们先说忧吧……

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

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

5.6.2　使用@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）上也有一些非常优秀的付费字体。

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

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

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

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

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

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

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

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