在一些 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>
最佳答案
您误解了该值的用途。从该页面:
This descriptor defines the range of Unicode characters supported by a given font
所以这不是要下载的字形(或字符)，这实际上是告诉浏览器字体中有哪些字符，以便浏览器可以确定它是否值得首先下载字体。如果设置样式的文本不在给定的 unicode-range 中，则不会下载该字体。
您引用的页面上的示例 XIII 显示了一个很好的示例。假设 3 个 @font-face 规则共享相同的 font-family 属性。然而，第一条规则指向一个巨大的 4.5MB TTF 文件，其中包含所有可能需要的字形。第二条规则列出了一个小得多的 1.2MB TTF，但表示仅当所有字符都适合日文字形范围时才使用它。第三条规则列出了一个非常小的 190KB 文件，如果样式文本仅为罗马字体，则可以下载该文件。
https://stackoverflow.com/questions/7841844/