Page 157 - css揭秘

解决方案

我们真的可以用另一种字体来单独美化某个特定字符（或是某个区间内
的多个字符），但其过程可能没有你想像中那么简单明了。

我们通常会在 font-family 声明中同时指定多个字体（即字体队列）。
这样，即使我们指定的最优先字体不可用，浏览器还可以回退到其他符合整
体设计风格的字体。但是，很多开发者都忽略了一点：这个机制对单个字符
来说也是有效的。如果某款字体可用，但仅包括某几个字符，那它就只会用
来显示这几个字符；而在显示其他字符时，浏览器就会回退到其他字体。这
个规则对本地字体和通过 @font-face 规则引入的嵌入字体都是有效的。

在这个规则之下，如果有一款字体只包含一个字符（你肯定猜到是哪个
了吧），那这款字体将只用于显示这个字符，其他字符会由字体队列中排在
第二位、第三位或更后面的字体来显示。因此，只美化 & 符号的方法就浮
出水面了：创建一种只包含 & 字形的 Web 字体，通过 @font-face 将其引
入网页，然后把它排在字体队列中的第一位：

@font-face {
font-family: Ampersand;
src: url("fonts/ampersand.woff");
}

h1 {
font-family: Ampersand, Helvetica, sans-serif;
}

这个方法比较灵活，但如果我们只想用系统内建字体中的某一款来美化
& 符号，这个方法就不够理想了：不仅生成字体文件很麻烦，还会增加一个
额外的 HTTP 请求；如果你看中的这款字体不允许拆解使用，那你可能还要
面对版权上的问题。有没有一种办法可以用本地字体来实现这种效果呢？
你可能已经了解 @font-face 规则中的 src 描述符还可以接受 local()
函数，用于指定本地字体的名称。因此，不需要用到任何外部的 Web 字体，
就可以直接在字体队列中指定一款本地字体：

@font-face {
font-family: Ampersand;
src: local('Baskerville'),
local('Goudy Old Style'),
local('Garamond'),
local('Palatino');
}

但是，如果你想马上试试 Ampersand 字体，会发现整段文本都会被应用
图 5-20
为我们指定的某款衬线字体（参见图 5-20），因为这些字体本身涵盖了这段
通过 @font-face 引入本地字体，
导致这些字体被默认应用到整段 文本的所有字符。不过这并不表示我们走错了路，只是表示我们漏了一步没
文本上 有走：还需要一个描述符来声明我们想用这几款本地字体来显示哪些字符。

126 第 5 章 字体排印

඀ࠡ JOEC