MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

Unsere Freiwilligen haben diesen Artikel noch nicht in Deutsch übersetzt. Machen Sie mit und helfen Sie, das zu erledigen!
Sie können den Artikel auch auf English (US) lesen.

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

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.

Related at-rule@font-face
Initial valueU+0-10FFFF
Mediaall
Computed valueas specified
Canonical orderorder of appearance in the formal grammar of the values

Syntax

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

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.

Formal syntax

<unicode-range>#

Examples

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.

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

In the CSS, you can see that 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.

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

div {
  font-size: 4em;
  font-family: Ampersand, Helvetica, sans-serif;	
}

Reference result

What the example should looks like if your browser supports it.

Live result

Specifications

Specification Status Comment
CSS Fonts Module Level 3
The definition of 'unicode-range' in that specification.
Candidate Recommendation Initial definition

Browser compatibility

Feature Firefox (Gecko) Chrome Edge Internet Explorer Opera Safari
Basic support 44 (44)[1] (Yes)[2] (Yes) 9.0[2] (Yes)[2] (Yes)[2]
Feature Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mini Opera Mobile Safari Mobile
Basic support (Yes) (Yes) 44.0 (44)[1] 9.0 No support 10.0 (Yes)

[1] From Firefox 4 through Firefox 34, the unicode-range descriptor in @font-face rules was parsed but the codepoint range ignored. From Firefox 35, unicode-range can be enabled on non-Linux platforms using the layout.css.unicode-range.enabled pref, which was on by default in nightly/developer builds. On Linux, this was possible from Firefox 41 onwards.

[2] Firefox and Chrome respect the unicode-range value when deciding which fonts to download (from Chrome 36, Chromium bug 247920). Safari and Internet Explorer ignore the unicode-range value when deciding which fonts to download but respect it when deciding which font to use.

Schlagwörter des Dokuments und Mitwirkende

 Zuletzt aktualisiert von: erikadoyle,