问题
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
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>
回答1:
You are misunderstanding the purpose of that value. From that page:
This descriptor defines the range of Unicode characters supported by a given font
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.
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.
来源：https://stackoverflow.com/questions/7841844/font-face-unicode-range-attribute