HTML and CSS Reference
In-Depth Information
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
following formats:
U+A5 (¥).
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
( ) designed by Eben Sorkin.
@font-face {
font-family: 'Limelight Quotes';
src: url('styles/fonts/Limelight-webfont.eot');
src: url('styles/fonts/Limelight-webfont.eot?#iefix') format('embedded-opentype'),
url('styles/fonts/Limelight-webfont.woff') format('woff'),
url('styles/fonts/Limelight-webfont.ttf') format('truetype'),
url('styles/fonts/Limelight-webfont.svg#LimelightRegular') format('svg');
unicode-range: U+201c-d;
.quote {
font-family: 'Limelight Quotes', serif;
font-size: 150%;
There's a list of Unicode code points at of Unicode characters .
The quotes in the main heading in the page are wrapped in <span> tags and assigned the quote class
like this:
<h1> <span class="quote">&#8220;</span> Turtle Soup <span class="quote">&#8221;</span> </h1>
Figure 5-7 shows the result in Chrome.
Search WWH ::

Custom Search