CSS @font-face - unicode-range_CSS 菜鸟教程

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

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

这个 decripor 的意义在于它让字体资源被分割，以便使浏览器下载当前页面使用的字体资源。考虑一个示例，其中站点根据其本地化使用以各种语言（字体资源）提供内容，例如希腊语、法语、英语等。因此，对于用户来说，访问其中一个字体资源将不需要其他字体资源，从而避免下载未使用的字体资源，这反过来将节省带宽。

可能的值

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

单个码位：指定单个 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 范围描述符，每个元素的字体都不同。

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

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

<< CSS @font-face - src CSS - fit-content 属性 >>