Optimized Appearance - Web Standards: Mastering HTML5, CSS3, and XML - page 327

The normal, bold, and italic versions, as well as the bold and italic fonts, of a typeface are generally stored in
separate files. Consequently, multiple declarations are needed to download and apply the appropriate font styles of
the selected typeface (Listing 9-13). Without that, the content of headings and strong elements will be rendered using
normal fonts rather than bold ones, em elements will be displayed with normal rather than italic fonts, and so on.
Listing 9-13. Multiple Declarations for the Same Typeface
@font-face {
font-family: Calluna;
src: url('fonts/Calluna-Regular.otf');
}
@font-face {
font-family: Callunab;
src: url('fonts/Calluna-Bold.otf');
}
@font-face {
font-family: Callunai;
src: url('fonts/Calluna-It.otf');
}
body {
font-family: "Calluna", "Helvetica", serif;
}
h1, h2, h3, strong {
font-family: "Callunab";
}
em {
font-family: "Callunai";
}
There are also some alternatives for web fonts. A technique called image replacement , which is considered legal
by many, is applied by some web designers to use rendered images of fonts. However, image replacement prevents
text selection, has searchability and accessibility issues, and increases bandwidth use.
Another approach applies the Flash-based solution Scalable Inman Flash Replacement ( sIFR ). It is similar to
image replacement, but the text is selectable and rendered as a vector graphic. A big disadvantage is that this method
relies on a Flash plug-in on the client side.
The text can also be replaced by SVG or VML 6 (for Internet Explorer up to version 8) with JavaScript.
In SVG 1.1, fonts can be created within the SVG document. SVG fonts can improve the semantics of graphics that
represent texts, such as logos. SVG fonts are partly supported by Safari 3+ and Opera 8+.
6 SVG was not supported by earlier versions of Internet Explorer, which supported the Vector Markup Language (VML) instead
(now obsolete).