unicode-range

**unicode-range** CSS 描述符设置了从使用 @font-face at-rule 定义的字体中使用的特定字符范围，并使其在当前页面上可用。 如果页面未使用此范围内的任何字符，则不会下载字体； 如果使用至少一个，则会下载整个字体。

语法

css
/* <unicode-range> values */
unicode-range: U+26; /* single code point */
unicode-range: U+0-7F;
unicode-range: U+0025-00FF; /* code point range */
unicode-range: U+4??; /* wildcard range */
unicode-range: U+0025-00FF, U+4??; /* multiple values */

Values

single code point

单个 Unicode 字符代码点，例如 U+26。

code point range

一系列 Unicode 代码点。 例如，U+0025-00FF 表示*包括 U+0025 到 U+00FF 范围内的所有字符*。

wildcard range

包含通配符的 Unicode 代码点范围，即使用 '?' 字符，例如 U+4?? 表示*包括 U+400 到 U+4FF 范围内的所有字符*。

描述

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

正式定义

Related at-rule@font-face
Initial valueU+0-10FFFF
Computed valueas specified

正式语法

unicode-range = 
  <urange>#

示例

Using a different font for a single character

在这个例子中，我们创建了一个简单的 HTML，它包含一个单一的 <div> 元素，其中包含一个我们想要使用不同字体样式的“&”符号。 为了使其一目了然，我们将使用 sans-serif 字体*Helvetica* 来显示文本，并使用 serif 字体*Times New Roman* 来显示“&”符号。

在 CSS 中，我们实际上定义了一个完全独立的 @font-face，它只包含一个字符，这意味着只有这个字符会使用该字体进行样式设置。 我们也可以通过将“&”符号包装在 <span> 中，并仅对该符号应用不同的字体来实现这一点，但这需要额外的元素和规则集。

HTML

html
<div>Me & You = Us</div>

CSS

css
@font-face {
  font-family: "Ampersand";
  src: local("Times New Roman");
  unicode-range: U+26;
}

div {
  font-size: 4em;
  font-family: Ampersand, Helvetica, sans-serif;
}

Result

规范

Specification
CSS Fonts Module Level 4
# unicode-range-desc

浏览器兼容性

BCD tables only load in the browser

另请参见