unicode-range

在此页

句法
描述
形式定义
形式句法
范例
规范
浏览器兼容性
另请参阅
相关话题

unicode-range CSS descriptor sets the specific range of characters to be used from a font defined by @font-face and made available for use on the current page. If the page doesn't use any character in this range, the font is not downloaded; if it uses at least one, the whole font is downloaded.

句法

/* <unicode-range> values */
unicode-range: U+26;               /* single codepoint */
unicode-range: U+0-7F;
unicode-range: U+0025-00FF;        /* codepoint range */
unicode-range: U+4??;              /* wildcard range */
unicode-range: U+0025-00FF, U+4??; /* multiple values */

值

single codepoint: A single Unicode character code point, for example U+26 .
codepoint range: A range of Unicode code points. So for example, U+0025-00FF means include all characters in the range U+0025 to U+00FF .
wildcard range: A range of Unicode code points containing wildcard characters, that is using the '?' character, so for example U+4?? means include all characters in the range U+400 to U+4FF .

描述

The purpose of this descriptor is to allow the font resources to be segmented so that a browser only needs to download the font resource needed for the text content of a particular page. For example, a site with many localizations could provide separate font resources for English, Greek and Japanese. For users viewing the English version of a page, the font resources for Greek and Japanese fonts wouldn't need to be downloaded, saving bandwidth.

形式定义

相关 at-rule	`@font-face`
初始值	`U+0-10FFFF`
计算值	如指定

形式句法

<unicode-range>#

范例

Using a different font for a single character

In this example we create a simple HTML containing a single <div> element, including an ampersand, that we want to style with a different font. To make it obvious, we will use a sans-serif font, Helvetica , for the text, and a serif font, Times New Roman , for the ampersand.

In the CSS we are in effect defining a completely separate @font-face that only includes a single character in it, meaning that only this character will be styled with this font. We could also have done this by wrapping the ampersand in a <span> and applying a different font just to that, but that is an extra element and rule set.

HTML

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

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 Fonts Module Level 3 The definition of 'unicode-range' in that specification.	候选推荐	初始定义

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`unicode-range`	Chrome 完整支持 1	Edge 完整支持 12	Firefox 完整支持 36	IE 完整支持 9	Opera 完整支持 15	Safari 完整支持 3.2	WebView Android 完整支持 ≤37	Chrome Android 完整支持 18	Firefox Android 完整支持 36	Opera Android 完整支持 14	Safari iOS 完整支持 3	Samsung Internet Android 完整支持 1.0

图例

完整支持

另请参阅

元数据

最后修改： Aug 19, 2020

CSS
CSS 参考
CSS 字体
指南
1. OpenType font features guide
2. Variable fonts guide
At-Rules
1. @font-face
2. @font-feature-values
特性

在此页

句法

值

描述