4.5 网络字体
CSS3允许用户通过@font-face规则加载网络字体文件，方便用户自定义字体类型。@font-face规则在CSS3规范中属于字体模块。
权威参考：http://www.w3.org/TR/css3-fonts/#font-face。
4.5.1 使用@font-face
@font-face规则的语法格式如下：
@font-face {<font-description>}
@font-face规则的选择符是固定的，用来引用网络字体文件。<font-description>是一个属性名值对，格式类似如下样式：
属性及其取值说明如下。
font-family：设置文本的字体名称。
font-style：设置文本样式。
font-variant：设置文本是否大小写。
font-weight：设置文本的粗细。
font-stretch：设置文本是否横向拉伸变形。
font-size：设置文本字体大小。
src：设置自定义字体的相对或者绝对路径。注意，该属性只用在@font-face规则里。
提示：事实上，IE 5已经开始支持该属性，但是只支持微软自有的.eot（Embedded Open Type）字体格式，而其他浏览器直到现在都不支持这一字体格式。不过，从Safari 3.1开始，用户可以设置.ttf（TrueType）和.otf（OpenType）两种字体作为自定义字体。考虑到浏览器的兼容性，在使用时建议同时定义.eot和.ttf，以便能够兼容所有主流浏览器。
【示例】下面是一个简单的示例，演示如何使用@font-face规则在页面中使用网络字体。示例代码如下，演示效果如图4.35所示。
图4.35 设置为lexograph字体类型的文字
提示：嵌入外部字体需要考虑用户带宽问题，因为一个中文字体文件小的有几个兆，大的有十几兆，这么大的字体文件下载过程会出现延迟，同时服务器也不能忍受如此频繁的申请下载。如果只是想标题使用特殊字体，最好设计成图片。
4.5.2 案例：设计字体图标
本节示例通过@font-face规则引入外部字体文件glyphicons-halflings-regular.eot，然后定义几个字体图标，嵌入导航菜单项目中，效果如图4.36所示。
图4.36 设计包含字体图标的导航菜单
示例主要代码如下：
