unicode-range
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
The unicode-range CSS descriptor sets the specific range of characters to be used from a font defined using the @font-face at-rule 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.
Syntax
/* <unicode-range> values */ unicode-range: U+26; /* single code point */ unicode-range: U+0-7F; unicode-range: U+0025-00FF; /* code point range */ unicode-range: U+4??; /* wildcard range */ unicode-range: U+0025-00FF, U+4??; /* multiple values */ Values
- single code point
-
A single Unicode character code point, for example
U+26. - code point range
-
A range of Unicode code points. So for example,
U+0025-00FFmeans include all characters in the rangeU+0025toU+00FF. - wildcard range
-
A range of Unicode code points containing wildcard characters, that is using the
'?'character, so for exampleU+4??means include all characters in the rangeU+400toU+4FF.
Description
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.
Formal definition
Value not found in DB!Formal syntax
unicode-range =
<unicode-range-token>#
Examples
>Using a different font for a single character
In this example, we create a single <div> element, with a text string that includes 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; } Result
Specifications
| Specification |
|---|
| CSS Fonts Module Level 4> # unicode-range-desc> |
Browser compatibility
Loading…