1 performance css3 webfonts font-face unicode-range
在一些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>
你误解了这个价值的目的.从该页面:
此描述符定义给定字体支持的Unicode字符范围
所以这不是要下载的字形(或字符),这实际上告诉浏览器字体中有哪些字符,以便浏览器可以确定它是否值得首先下载字体.如果正在设置样式的文本不在给定内容中,unicode-range则不会下载该字体.
您引用的页面上的示例XIII显示了一个很好的示例.想象一下@font-face共享相同font-family属性的3 条规则.然而,第一条规则指向一个巨大的4.5MB TTF文件,该文件具有所需的每个字形.第二条规则列出了一个小得多的1.2MB TTF,但只表示只有当所有字符都符合日语字形范围时才使用它.第三个规则列出了一个非常小的190KB文件,如果样式文本只是罗马文件,可以下载.