Question

在一些html文档中，我只使用几个单词的webfonts。以性能方式加载完整的字体文件似乎很浪费。这是@ font-face声明的unicode-range参数的来源：

http://www.w3.org/TR/css3-fonts/#unicode-range-desc

有了它我可以定义要加载的字体文件的哪些字符，从而大大提高性能。但我无法让它发挥作用。奇怪的是它覆盖了firefox中的所有字符，并且如果我在声明中包含unicode-range参数，它无法在safari中加载字体。任何帮助将不胜感激，下面是我测试它的HTML：

<!doctype html>
<html lang="en">
<head>
<style text="text/css">
@font-face {
font-family: 'dream';
src: url(Fonts/Digital-dream/DIGITALDREAM.ttf) format("truetype");
unicode-range: U+FF21;
}

*{
font-family:dream;
font-weight:normal;
}
</style>
</head>
<body>
<p>ASDWEWQDSCF</p>
</body>
</html>

Answer 1

你误解了这个价值的目的。从该页面：

此描述符定义给定字体支持的Unicode字符范围

所以这不是下载的字形（或字符），这实际上告诉浏览器字体中有哪些字符，以便浏览器可以确定它是否值得首先下载字体。如果正在设置样式的文本不在给定的unicode-range中，则不会下载该字体。

您引用的页面上的示例XIII显示了一个很好的示例。想象一下共享相同@font-face属性的3 font-family个规则。然而，第一条规则指向一个巨大的4.5MB TTF文件，该文件具有所需的每个字形。第二个规则列出了一个小得多的1.2MB TTF，但只表示只有当所有字符都符合日语字形范围时才使用它。第三个规则列出了一个非常小的190KB文件，如果样式文本只是罗马文件，可以下载。

@ font-face unicode-range属性

1 个答案: