Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Relawan kami belum menerjemahkan artikel ini ke dalam Bahasa Indonesia . Bergabunglah dan bantu kami menyelesaikan pekerjaan ini!

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 Internet Explorer Opera Safari
Basic support 44 (44)[1] (Yes)[2] 9.0[2] (Yes)[2] (Yes)[2]
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mini Opera Mobile Safari Mobile
Basic support (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.

Tag Dokumen dan Kontributor

 Terakhir diperbarui oleh: Sebastianz,