Definition and Usage
The unicode-range CSS descriptor sets the specific range of characters to be downloaded from a font defined by @font-face and made available for use on the current page.
This descriptor can be used to make a custom @font-face contains only the characters that needs to be downloaded, saving on bandwidth.
Note: Web developer should always include a fallback font that is acceptable in case the unicode-range descriptor @font-face is not supported and the whole at-rule being invalid.
- Initial valueU+0-10FFFF
- Usagein a @font-face at-rule
- Media visual
- CSSOM property CSSFontFaceRule.unicodeRange
Syntax
Formal syntax: <urange># where: <urange> = single_codepoint | codepoint_range | wildcard_range
unicode-range: U+26 /* single_codepoint */ unicode-range: U+0025-00FF /* codepoint_range */ unicode-range: U+4?? /* wildcard_range */ unicode-range: U+0025-00FF, U+4?? /* multiple values can be separated by commas */
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.
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 we don't need to download the entire font to get what we want if it is a hosted font, and if it is a local font as in this example, we can at least cut down on extra markup and styles. 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 ruleset.
@font-face { font-family: 'Ampersand'; src: local('Times New Roman'); unicode-range: U+26; } div { font-size: 4em; font-family: Ampersand, Helvetica, sans-serif; }
Compatibility
Desktop browsers
Feature | Firefox (Gecko) | Chrome | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | Not supported | (Yes) | 9.0 | (Yes) | (Yes) |
Mobile browsers
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mini | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | (Yes) | Not supported | 9.0 | Not supported | 10.0 | (Yes) |