CSS @font-face - unicode-range

CSS 描述符unicode-range 用于 @font-face @规则，用于设置使用@font-face @规则从字体中使用的特定字符范围，并且可以提供在当前页面上使用。

当指定范围内的任何字符未被当前页面使用时，则不会下载该字体。即使使用单个字符，也会下载完整的字体。

此描述符的重要性在于，它允许字体资源被分割，以便使浏览器下载当前页面使用的字体资源。例如，某个网站根据其本地化使用情况提供各种语言（字体资源）的内容，例如希腊语、法语、英语等。因此，访问其中一种字体资源的用户不需要其他字体资源，避免下载未使用的字体资源，从而节省带宽。

可能的值

unicode-range CSS 描述符可以具有以下范围值之一

单个代码点：指定单个 Unicode 字符代码点，例如U+26。
代码点范围：指定 Unicode 代码点的范围，例如U+0025-00FF，表示包含U+0025 和U+00FF 范围内的所有字符。
通配符范围：指定由通配符组成的 Unicode 代码点范围，例如使用'?' 字符，例如U+4??，表示包含U+400 和U+4FF 范围内的所有字符。

语法

unicode-range = #

以下是指定范围的不同方法

/* Single code point */
unicode-range: U+26;

/* code point range */
unicode-range: U+0025-00FF;

/* wildcard range */
unicode-range: U+4??; 

/* multiple values in one declaration */
unicode-range: U+0025-00FF, U+4??;

CSS unicode-range - 单个字符字体更改

以下示例演示了@font-face @规则的unicode-range 描述符的使用，每个元素使用不同的字体。

<html>
<head> 
<style>
   @font-face {
      font-family: "f1";
      src: local("Arial bold");
      unicode-range: U+26;
   }

   @font-face {
      font-family: "f2";
      src: local("Verdana");
      unicode-range: U+26;
   }

   span {   
      font-family: f1;
      color: green;
      font-size: 1.5em;
   }

   p {
      font-family: f2;
      color: red;
      font-size: 3.5em;
   }
</style>
</head>
<body>
   <p>Verdana <span>&</span> Verdana</p>
</body>
</html>

在上例中，<span> 中包含的 & 符号使用Arial 粗体 字体，<p> 元素使用verdana 字体。

打印页面