unicode-range

摘要

unicode-range 允许你设置一个特定的字符范围，从字体（使用 @font-face 嵌入）下载并使其在当前页面上可用。

概述表

初始值: U+0-10FFFF
适用范围: 包含该属性的 @font-face 块。
继承: 否
媒体: 视觉
计算值: 与输入值相同
可动画: 否
CSS 对象模型属性: unicodeRange

语法

unicode-range: 代码点范围
unicode-range: 多值声明
unicode-range: 单个代码点
unicode-range: 通配符范围

值

单个代码点: 单个 Unicode 字符代码点，例如 unicode-range: U+26。
代码点范围: Unicode 代码点范围。例如，unicode-range: U+0025-00FF 表示“包含 U+0025 到 U+00FF 范围内的所有字符”。
通配符范围: 你可以使用“?”字符指定通配符，例如 unicode-range: U+4?? 将表示“包含 U+400 到 U+4FF 范围内的所有字符”。
多值声明: 你可以使用逗号分隔指定多个单个代码点和/或代码点组。例如，unicode-range: U+00-FF, U+980-9FF。

示例

一段包含与符号 (&) 的 HTML 段落。我们已将与符号包装在 <span> 元素中，因为我们希望使用来自不同字体的不同与符号。

<p>Me & You = Us</p>

查看实时示例

上述示例的 CSS：你可以看到，我们实际上定义了一个完全独立的 @font-face，其中仅包含一个字符，这意味着如果我们使用的是托管字体，我们不需要下载整个字体即可获得所需内容，如果它是本地字体（如本例所示），我们至少可以减少额外的标记和样式（我们也可以通过将与符号包装在 <span> 中并仅将不同的字体应用于该符号来执行此操作，但这会增加额外的元素和规则集！）

请注意，Firefox 尚未正确支持 unicode-range，因此才需要第二个 @font-face 块。在这里，我们指向一个晦涩的 Unicode 代码点，该代码点可能永远不会在我们的文档中使用，导致 Firefox 停止将 posh Eccentric 字体应用于整个段落（这绝对不是我们想要的。）——仅 helvetica 是一个更好的回退方案。

@font-face {
  font-family: 'Ampersand';
  src: local('Eccentric STD');
  unicode-range: U+26;
}

@font-face {
    /* Ampersand fallback font */
    font-family: 'Ampersand';
    src: local('helvetica');
    unicode-range: U+270C;
}

p {
    color: #faf;
    letter-spacing: -0.05em;
    font-size: 64px;
    font-family: Ampersand, helvetica, sans-serif;
}

用法

 * As the examples above show, you can use unicode-range to create a custom @font-face that contains only the characters you need to be downloaded, saving on bandwidth.

如果你的 unicode-range @font-face 不受支持，你应始终包含一个可接受的回退字体。
目前对 unicode-range 的支持有限；Chrome 和 Safari 很好地支持它，Internet Explorer 从版本 9 开始支持它，Opera 支持它，Firefox 不支持它。

unicode-range

摘要

概述表

语法

值

示例

用法

相关规范

参见

外部资源