4.3 Web字体大揭秘

目前，使用@font-face规则在网页中嵌入可下载字体的CSS功能，已经得到了浏览器广泛支持。

@font-face规则为设计师提供了系统自带字体以外的广泛选择。换句话说，浏览器可以从Web服务器下载字体，就意味着不必再依赖用户机器中的字体，而且也可以确保用户能够看到CSS中设定的字体。

设定Web字体的方式有以下三种。

  • 使用Google Web Fonts或Adobe的Typekit等公共字体库。
  • 使用事先打好包的@font-face包。
  • 使用Font Squirrel用你自己的字体生成@font-face包。下面，我们从最简单的方法——使用字体库，开始介绍。

4.3.1 公共字体库

Google Web Fonts和Adobe的Typekit是目前最大的两个在线公共字体库，前者托管着大约500多类字体，后者包含739个字体族，以订购方式提供访问。这两个字体库的用户界面都十分友好。

来看看Google Web Fonts的使用步骤。打开http://www.google.com/webfonts，找到想要的字体，单击Add to Collection按钮，然后单击页面底部的Use按钮（如图4-14所示）。然后，Google就会生成一个指向你刚刚选定字体的<link>标签，直接把它复制粘贴到你的HTML文件中即可。

enter image description here图4-14 Google已经把Niconne字体放到我的集合里，然后它会给我生成一个指向该字体的链接

一行代码可以链接多款字体。比如下面这个<link>标签就引用了Anton、Niconne和Prata字体。

  1. <link href='http://fonts.googleapis.com/css?family=Anton|Niconne|Prata' rel='stylesheet'  type='text/css'>

把这个链接添加到页面的<head>标签中之后，就可以像使用其他字体一样使用这些Web字体了。用户打开网页时，浏览器就会从Google的服务器得到相应字体。比如

  1. h3 {font: 20px "Prata", serif;}

的效果如图4-15所示。

enter image description here图4-15 用户可以看到Prata字体的标题了

在线字体库能够迅速而有效地扩展有限的系统字体。在页面中使用Google字体就是几分钟的事儿，而且关键是这样一来，你的用户就真的能看到你设定的字体了。

4.3.2 打包的@font-face包

在网页中嵌入字体的第二种方式是使用@font-face规则，前提是可以从你的网站或第三方Web服务器下载到相应的字体。以这种方式提供的字体，会在使用该字体的页面第一次加载时被浏览器下载并缓存起来，以后就不用下载了。但是，除了显示网页之外，用户不能将这种字体用于其他用途。

使用@font-face规则相对来说要麻烦一点，不过却能做到想用什么字体就用什么字体。字体一般都有许可限制，你要么花钱买字体，要么选择不需要付钱且允许嵌入网页的字体。

使用@font-face的一个问题是不同浏览器要求的字体格式不一样。比如，Firefox、Webkit核心的浏览器（Safari和Chrome），以及iOS 4.1版之后的移动Safari使用OTF（OpenType）或TTF（TrueType）字体。Internet Explorer使用EOT（Embedded OpenType）。另外，iOS 4.1之前版本中的移动Safari以及其他浏览器使用SVG（Scalable Vector Graphics）格式。虽然字体格式不同，但它们往往以现成的字体包的形式存在，或者可以使用本地字体来生成字体包（提醒你一下，自己生成字体包首先要获得许可）。

Font Squirrel（http://www.fontsquirrel.com）提供了很多现成的字体包，每个字体包中都包含所有必要格式的字体和为每款浏览器提供正确格式的CSS代码。Font Squirrel还有一个转换程序，能够把你上传的字体转换成字体包。

下面就是Font Squirrel为Ubuntu Titling Bold字体生成的@font-face代码。对于其他来源的字体，这种格式也是适用的。

  1. @font-face {
  2.     font-family:'UbuntuTitlingBold'; /*这就是将来在字体栈中引用的字体族的名字*/
  3.     src: url('UbuntuTitling-Bold-webfont.eot');
  4.     src: url('UbuntuTitling-Bold-webfont.eot?#iefix')
  5.     format('embedded-opentype'),
  6.     url('UbuntuTitling-Bold-webfont.woff')
  7.     format('woff'),
  8.     url('UbuntuTitling-Bold-webfont.ttf')
  9.     format('truetype'),
  10.     url('UbuntuTitling-Bold-webfont.
  11.         svg#UbuntuTitlingBold') format('svg');
  12.     font-weight: normal;
  13.     font-style: normal;
  14. }

把以上代码添加到网页中之后，就可以使用font-family以常规方式引用该字体了。引用字体时要使用@font-face规则中font-family属性的值作为字体族的名字。

Web专家Paul Irish写过一个跨浏览器@font-face的“笑脸版”，可以保证用户机器中万一安装了同名字体时也不会混淆，详细内容请参考这篇文章：http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/。

4.3.3 生成@font-face包

有时候，你可能希望在自己的网页中使用一种特殊字体，比如客户自己公司指定了一种字体，必须用在网站和设计中。今天，只要你获得了把该字体转换为Web字体使用的授权（请查看许可协议或联系字体设计商），就可以使用Font Squirrel的转换程序（http://www.fontsquirrel.com/fontface/generator）把它转换成@font-face字体包。只要简单几步，几分钟时间，就可以得到一个能放到你自己Web服务器上供下载的@font-face字体包。

如果想深入理解@font-face规则，建议读一读Tim Brown的博客文章“How to use @font-face”：http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/。

在讨论设计文字版式的例子之前，还有两件事要跟大家交待。除非所有浏览器都统一支持一种字体格式（很可能是OpenType），否则我们必须得面对多种字体格式并存的问题。关于多种字体格式的@font-face规则如何写，以及如何保证Internet Explorer取得必要的.eot格式的字体，可以参考Fontspring博客的文章：http://www.fontspring.com/blog/fixing-ie9-font-face-problems，Fontspring也销售字体，允许以@font-face方式使用。

从Web诞生的那一天起，设计师能够在PC和Mac上使用的字体就是有限的（使用独特的字体需要太多的额外努力）。经过长久的等待，所有浏览器——包括IE9及更高版本，终于都支持@font-face了。Web设计师从此也能像平面设计师一样随心所欲地使用字体了。对于那些不支持@font-face的旧版本浏览器，解决办法也简单，就是在字体栈中同时列出那些用户机器中最可能有的字体，最好是紧跟在首选的嵌入字体之后。