@font-face.unicode-range

@font-face.unicode-range

unicode-rangeCSS描述符设置要由所定义的字体中使用的字符的特定范围内@font-face，并用于在当前页上使用提供。如果页面在此范围内没有使用任何字符，则不会下载字体; 如果至少使用了一个，则会下载整个字体。

这个描述符的目的是允许字体资源被分割，以便浏览器只需要下载特定页面的文本内容所需的字体资源。例如，一个有很多本地化的网站可以为英文，希腊文和日文提供单独的字体资源。对于查看页面英文版的用户，希腊字体和日文字体的字体资源不需要下载，节省了带宽。

语法

/* <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。

形式语法

<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;	
}

参考结果

结果

规范

浏览器兼容性