Page 159 - css揭秘

除非整个标题都是斜体的（在这种情况下，& 符号确实会显示为我们想要
的样子）。
很遗憾，我们唯一的出路有些 hack 的味道：不去指定字体的家族名
（family name），而是直接指定字体中我们想要的单个风格 / 字重所对应的
①
“PostScript 名称” 。因此，为了指定这些字体的斜体版本，最终的代码会
1
变成这样：
@font-face {
font-family: Ampersand;
src: local('Baskerville-Italic'),
local('GoudyOldStyleT-Italic'),
local('Palatino-Italic'),
local('BookAntiqua-Italic');
unicode-range: U+26;
}

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

最终，这段代码完美地将 & 符号显示为我们想要的样式，与图 5-19 中
的效果如出一辙。不过，如果我们想进一步对它的样式进行自定义的话（比
如增加大字号，改变透明度，等等），就只能倒回到修改 HTML 的那条老
路了。当然，如果只想把它设置为不同的字体或字体中特定的某个风格 / 字
重，那这个技巧堪称完美。你还可以举一反三，用不同的字体来美化数字、
符号、标点等。各种创意完全停不下来！

试一试 play.csssecrets.io/ampersands

向 Drew McLellan（http://allinthehead.com）脱帽致敬，感谢他提出这
个效果的最初版本（http://24ways.org/2011/creating-custom-font-stacks-with-
unicode-range）。

致 敬

„ CSS 字体
http://w3.org/TR/css-fonts 相关规范

① 如果要在 Mac OS X 中查出某款字体的“PostScript 名称”，可以在字体簿程序中选中该字
体，然后按 ⌘I。

128 第 5 章 字体排印

඀ࠡ JOEC