2

在一些 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>
4

1 回答 1

8

您误解了该值的目的。从该页面：

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

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

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

于 2011-10-20T20:43:58.457 回答