HTML and CSS Reference
Specifying a Range of Characters
Embedding web fonts increases the download size of your web pages, so it's important to use them only where
it makes a significant improvement to the design. You can also limit the range of characters that a browser
downloads, which can be particularly useful when dealing with nonalphabetic languages such as Chinese or
Japanese, or if you want only a small number of symbols from a larger font.
You control the range of characters in an @font-face rule with unicode-range , which expects one or
more Unicode ranges as a comma-separated list. A Unicode range always begins with U+ followed by one of the
A hexadecimal number representing a single code point, for example
Two hexadecimal numbers separated by a hyphen representing a consecutive range,
for example U+590-5ff represents the code range for Hebrew.
? characters represent any single digit, for example U+30??
represents the code range for Japanese hiragana and katakana.
A range where trailing
The hexadecimal digits in a Unicode range are case-insensitive. U+A5 and U+a5 have the same meaning.
At the time of this writing, unicode-range is supported by the latest versions of all browsers except Firefox
and Opera. The styles in range.html contain the following @font-face rule to define a font called Limelight
Quotes, which uses unicode-range to select only left and right double quotes from the Limelight font
( www.fontsquirrel.com/fonts/limelight ) designed by Eben Sorkin.
font-family: 'Limelight Quotes';
src: url('styles/fonts/Limelight-webfont.eot?#iefix') format('embedded-opentype'),
font-family: 'Limelight Quotes', serif;
There's a list of Unicode code points at http://en.wikipedia.org/wiki/List of Unicode characters .
The quotes in the main heading in the page are wrapped in <span> tags and assigned the quote class
<h1> <span class="quote">“</span> Turtle Soup <span class="quote">”</span> </h1>
Figure 5-7 shows the result in Chrome.