unicode-range

Avatar of Geoff Graham
Geoff Graham

DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 价值 200 美元的免费积分!

CSS 中的 unicode-range 属性由 @font-face 用于定义字体面支持的字符。

@font-face {
  font-family: 'MyWebFont'; /* Define the custom font name */
  src:  url('myfont.woff2') format('woff2'),
        url('myfont.woff') format('woff'); /* Define where the font can be downloaded */
  unicode-range: U+00-FF; /* Define the available characters */
}

换句话说,@font-face 将引用该属性并根据 HTML 文档中字符或字符范围是否与这些字符匹配来确定是否应该下载并使用该字体。

字体面: 嘿 HTML,页面上的字符是否与以下字符中的任何一个匹配?
HTML: 是的,其中有很多匹配。
字体面: 太棒了,这是一个您应该下载以显示这些字符的字体文件。

我们应该在这里指出的是,unicode-range 决定了字体可以用于哪些字符,而不是字体可用哪些字符。 换句话说,如果我们在 @font-face 上声明一个 unicode-range,并且 HTML 文档中加载的字符与该范围匹配,那么该字体将被下载并投入使用。

您可以想象使用此属性所带来的性能优势。 例如,我们只能在自定义字体适应特定字符时加载它,而不是在所有情况下始终加载它。

由于 一个方便的技巧 由 Jake Archibald 分享,甚至有一种方法可以将两个 @font-face 集合并到相同的 font-face 属性声明中。 想法是,一个 @font-face 集会根据匹配的 unicode-range 覆盖另一个集,从而优化性能,或者只是增强页面上的排版。

任何 Unicode 字符代码或范围都是可接受的 unicode-range 值。 您会注意到 Unicode 点以 U+ 开头,后面跟着最多六个字符,构成字符代码。 不遵循此格式的点或范围被认为无效,会导致该属性被忽略。

  • 单个字符(例如 U+26
  • 字符范围(例如 U+0025-00FF
  • 通配符范围(例如 U+4??

通配符范围是其中最棘手的。 每个 ? 代表一个通配符,任何值都会匹配。 您可能认为这意味着您可以像这样使用通配符来匹配整个范围

@font-face {
  font-family: 'MyWebFont';
  src:  url('myfont.woff2') format('woff2'),
        url('myfont.woff') format('woff');
  unicode-range: U+??????; /* This does not work! */
}

但是,这将不起作用。 原因是,以 ? 开头意味着字符代码以 0 开头,这意味着尽管 Unicode 接受最多六个字符,但最多可以使用五个问号字符。

@font-face {
  font-family: 'MyWebFont';
  src:  url('myfont.woff2') format('woff2'),
        url('myfont.woff') format('woff');
  unicode-range: U+?????; /* This works and is equivalent to U+0????? */
}

有很多 Unicode 选项。 基本拉丁语(0020—007F)可能是英语网站最常见的范围,但是 unicode-table.com 提供了所有可用范围的综合列表,其中包含特定字符的代码。

浏览器支持

此浏览器支持数据来自 Caniuse,它包含更多详细信息。 数字表示浏览器从该版本开始支持该功能。

桌面

ChromeFirefoxIEEdgeSafari
3644111710

移动设备/平板电脑

Android ChromeAndroid FirefoxAndroidiOS Safari
12712712710.0-10.2

进一步阅读