Page 158 - css揭秘

这个描述符确实是存在的，叫作 unicode-range。 !
对于 BMP（Basic Multiling
这个 unicode-range 描述符只在 @font-face 规则内部生效（因此这里 ual Plane， 基 本 多 文 种 平 面 ）
用了描述符这个术语；它并不是一个 CSS 属性），它可以把字体作用的字符 之 外 的 Unicode 字 符 来 说，
范围限制在一个子集内。它对本地字体和远程字体都是有效的。某些智能的 String#charCodeAt() 会返回错
误的结果。不过我们日常需要查
浏览器甚至可以做到当网页中的所有字符都用不到远程字体时就不去下载！
询的 99.9% 的字符应该都在这
这个 unicode-range 在实践中非常实用，但在语法上却非常晦涩。它 个范围之内。如果你得到的结果
在 D800~DFFF 区间之内，则意
的语法是基于“Unicode 码位”的，而不是基于字符的字面形态。因此，在
味着这个字符太过“超凡脱俗”，
使用之前，你需要查出你想指定的这些字符的十六进制码位。有不少网上工 最好换用一个靠谱的网上工具来
具可以做到，你也可以在控制台试试下面这句 JavaScript 代码： 查出它的真实码位。不过 ES6 的
String#codePointAt() 方法已经
JS
"&".charCodeAt(0).toString(16); // 返回26 修复了这个问题。
这样你就得到了字符的十六进制码位，然后需要在码位前面加上 U+ 作
为前缀。这样一来，我们终于指定了一个字符！以 & 符号为例，我们需要
这样来声明：

unicode-range: U+26;

如果你想指定一个字符区间，还是要加上 U+ 前缀，比如 U+400-4FF。
实际上对于这个区间来说，你还可以使用通配符，以这样的方式来写：
U+4??。同时指定多个字符或多个区间也是允许的，把它们用逗号隔开即可，
比如 U+26, U+4??, U+2665-2670。不过在我们的例子中，只要指定单个字
符就足够了。我们的代码现在变为：

@font-face {
font-family: Ampersand;
src: local('Baskerville'),
local('Goudy Old Style'),
local('Palatino'),
local('Book Antiqua');
unicode-range: U+26;
}

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

如果你亲手试一试（结果参见图 5-21），就会发现我们终于为 & 符号应
用了不一样的字体！不过，这个结果还不完全是我们所期望的。图 5-19 中
的 & 符号是用 Baskerville 字体的斜体风格来显示的，因为一般来说，斜体 图 5-21
的衬线字体往往可以显示出更美观的 & 符号。我们并不是在对 & 符号单独 借助字体队列和 unicode-range
描述符，我们给 & 符号应用了不
设置样式，那么该如何把它设为斜体呢？
同的字体
我们的第一个想法可能是在 @font-face 规则中使用 font-style 描述
符。不过这并不会产生我们想要的效果。它只不过是告诉浏览器只在斜体
文本中使用这些字体。因此，它会让我们的 Ampersand 字体被完全忽略掉，

25 华丽的 & 符号 127

඀ࠡ JOEC