@ font-face unicode-range属性 [英] @font-face unicode-range attribute
问题描述
在一些html文档中，我仅使用webfonts几个单词.从性能角度来看，加载完整的字体文件似乎很浪费.这是@ font-face声明的unicode-range参数进入的位置:
In some html documents I'm using webfonts for only a couple of words. Performance-wise loading a complete font-file seems wasteful. This is where the unicode-range parameter of the @font-face declaration comes in:
http://www.w3.org/TR/css3-fonts/#unicode-range-desc
据推测，我可以使用它定义要加载的字体文件的哪些字符，从而大大提高性能.但是我就是无法正常工作.奇怪的是，它会显示Firefox中的所有字符，并且即使我在声明中包括unicode-range参数，也无法将字体加载到Safari中.任何帮助将不胜感激，下面是我用它测试的html:
With it I supposedly can define what characters of the font-file to load, thus improving performance greatly. But I just can't get it to work. And the odd thing is that it diplays all the characters in firefox, and it fails to load the font in safari just if I include the unicode-range parameter in my declaration. Any help would be appreciated, below is the html I was testing it with:
<!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>
推荐答案
您误解了该值的目的.在该页面上:
You are misunderstanding the purpose of that value. From that page:
此描述符定义给定字体支持的Unicode字符范围
This descriptor defines the range of Unicode characters supported by a given font
因此，这不是要下载的字形(或字符)，实际上是在告诉浏览器字体中包含哪些字符，以便浏览器可以首先确定是否值得下载字体.如果要设置样式的文本不在给定的 unicode-范围中，则不会下载该字体.
So this isn't the glyphs (or characters) to download, this is actually telling the browser what characters are in the font so that the browser can determine if its even worth downloading the font in the first place. If the text being styled isn't in the given unicode-range then the font won't be downloaded.
您参考的页面上的示例XIII显示了一个很好的示例.想象一下3个 @ font-face 规则，它们共享相同的 font-family 属性.但是，第一个规则指向一个巨大的4.5MB TTF文件，该文件具有所需的所有可能的字形.第二条规则列出了一个较小的1.2MB TTF，但说只有在所有字符都适合日语字形范围时才使用它.第三条规则列出了一个非常小的190KB文件，如果要设置的文字仅是罗马文字，则可以下载.
Example XIII on the page you reference shows a great example. Imagine 3 @font-face rules that share the same font-family attribute. The first rule, however, points to a giant 4.5MB TTF file that has every possible glyph needed. The second rule lists a much smaller 1.2MB TTF but says to only use it only if all of the characters fit into the Japanese glyph range. The third rule lists a very small 190KB file that can be download if the text being styling is only roman.
这篇关于@ font-face unicode-range属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
