Embedding Web Fonts - Beginning CSS3 - page 83

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

■ Note 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-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%;
}

■ Tip 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
like this:

<h1> <span class="quote">&#8220;</span> Turtle Soup <span class="quote">&#8221;</span> </h1>

Figure 5-7 shows the result in Chrome.