@font-face.unicode-range
unicode-rangeCSS描述符设置要由所定义的字体中使用的字符的特定范围内@font-face，并用于在当前页上使用提供。如果页面在此范围内没有使用任何字符，则不会下载字体; 如果至少使用了一个，则会下载整个字体。
这个描述符的目的是允许字体资源被分割，以便浏览器只需要下载特定页面的文本内容所需的字体资源。例如，一个有很多本地化的网站可以为英文，希腊文和日文提供单独的字体资源。对于查看页面英文版的用户，希腊字体和日文字体的字体资源不需要下载，节省了带宽。
Related at-rule | @font-face |
|---|---|
初始值 | U+0-10FFFF |
使用媒体 | all |
计算值 | as specified |
规范顺序 | order of appearance in the formal grammar of the values |
语法
/* <unicode-range> values */
unicode-range: U+26; /* single codepoint */
unicode-range: U+0-7F;
unicode-range: U+0025-00FF; /* codepoint range */
unicode-range: U+4??; /* wildcard range */
unicode-range: U+0025-00FF, U+4??; /* multiple values */取值
single codepoint_A单码字符码点，例如U+26。
codepoint rangeA 一系列的Unicode代码点。因此，举例来说，U+0025-00FF意味着_include范围内的所有字符。
wildcard range_A的含有通配符字符的Unicode代码点_A范围，即使用字符，因此，例如意味着_include范围中的所有字符到。U+0025 U+00FF'?'U+4?? U+400 U+4FF
形式语法
<unicode-range>#实例
我们创建一个简单的HTML，其中包含一个<div>元素，包括一个符号，我们希望使用不同的字体样式。为了更清楚，我们会用无衬线字体，赫维蒂卡，文本，以及一种衬线字体，新罗马时代。
<div>Me & You = Us</div>在CSS中，你可以看到我们实际上定义了一个完全独立的@font-face，只包含一个单独的字符，这意味着只有这个字符将被设置为这个字体。我们也可以通过将＆符号包装成一个<span>然后应用一个不同的字体来做到这一点，但这是一个额外的元素和规则集。
@font-face {
font-family: 'Ampersand';
src: local('Times New Roman');
unicode-range: U+26;
}
div {
font-size: 4em;
font-family: Ampersand, Helvetica, sans-serif;
}参考结果
结果
规范
Specification | Status | Comment |
|---|---|---|
CSS Fonts Module Level 3The definition of 'unicode-range' in that specification. | Candidate Recommendation | Initial definition |
浏览器兼容性
Feature | Firefox (Gecko) | Chrome | Edge | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
Basic support | 44 (44)1 | (Yes)2 | (Yes) | 9.02 | (Yes)2 | (Yes)2 |
Feature | Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mini | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | 44.0 (44)1 | 9.0 | No support | 10.0 | (Yes) |
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
