unicode-range
unicode-range CSS 描述符设置了要使用的字符的特定范围，这些字符来自使用 @font-face 规则定义并可在当前页面上使用的字体。如果页面不使用此范围内的任何字符，则不会下载该字体；如果至少使用一个字符，则会下载整个字体。
语法
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 */
值
描述
此描述符的目的是允许字体资源分段，以便浏览器只需要下载特定页面文本内容所需的字体资源。例如，一个拥有多种本地化的网站可以为英语、希腊语和日语提供单独的字体资源。对于查看页面英文版的用户，无需下载希腊语和日语字体的字体资源，从而节省带宽。
正式定义
| 相关的 at-rule | @font-face |
|---|---|
| 初始值 | U+0-10FFFF |
| 计算值 | 同指定值 |
正式语法
unicode-range =
<unicode-range-token>#
示例
为单个字符使用不同的字体
在此示例中，我们创建了一个单独的 <div> 元素，其中包含一个文本字符串，其中包括一个我们想要用不同字体设置样式的 & 符号。为了使其显而易见，我们将对文本使用无衬线字体，Helvetica，对 & 符号使用衬线字体，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;
}
结果
规范
| 规范 |
|---|
| CSS 字体模块第 4 级 # unicode-range-desc |
浏览器兼容性
加载中…