@font-face unicode-range 属性答案

【问题标题】：@font-face unicode-range attribute@font-face unicode-range 属性
【发布时间】：2011-10-20 20:27:41
【问题描述】：

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

【问题讨论】：

尝试通过 fontsquirrel.com 生成跨浏览器 @font-face 工具包，然后应用 unicode range 属性。
我更喜欢理解字体声明而不是使用生成的东西......
我对@fontface 的理解比查看源套件增加了两倍。源代码是有史以来最好的文档。但你会得到一个讽刺的评论。您使用的是小写的 HTML5 文档类型，显然您不关心在使用之前理解元素

标签： performance css font-face webfonts unicode-range

【解决方案1】：

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

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

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

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

【讨论】：

对。感谢那！你有什么机会我可以从 unicode-range 中实现我想要的吗？
解决方案是创建多个版本的字体DIGITALDREAM.ttf。（你需要自己找到一个字体编辑器，但那里有很多。）一个版本可能只包含大写和小写A-Z、数字和标点符号。这个文件可能会非常小。第二个版本可能与第一个版本相同，但也包括重音字符。第三个版本可能只是巨大的原始 TTF 文件。按照链接上的示例 XIII 进行设置。另请记住，unicode-range 是 CSS3，因此可能尚不支持浏览器。
谢谢克里斯！我可能只是调整字体文件的大小。
嗯。问题是我使用的字体已获得许可，因此我无法真正修改它。我必须即时修改它，或者以某种方式使用 javascript 来提取我正在寻找的内容。我想这有点复杂吧？
最终，您的许可证将决定您可以做什么。但是，如果您使用 JavaScript 做任何事情，您首先必须下载整个字体，所以我认为这不会有帮助。我会确保在服务器上打开 GZip 压缩并为您的字体文件启用并在客户端缓存它们。