Styling Text with CSS - HTML5 - page 48

Although the font-family property by itself works with most browsers currently being used, you
are restricted to a very limited number of typefaces. The most modern browsers, including Internet
Explorer 9, Safari 5, and Firefox 3.x, support a CSS property that allows designers to integrate a
whole new category of fonts made specifically for the Web. The @font-face property opens the
door for web designers to create pages that rival print in terms of richness of typography. Some web
fonts that use @font-face are freely available, whereas others must be licensed on a site-by-site
basis.
With @font-face , you link to a web font much as you would link to an external style sheet with
@import . Here's a very basic use of @font-face :
@font-face {
font-family: 'MyWebFont';
src: url('MyWebFont.ttf') format('truetype');
}
Once the @font-face declaration has been made, the font-family property can be applied:
h1 { font-family: “MyWebFont”, sans-serif; }
The generic font — here, sans-serif — is listed as a fallback, just in case the user does not have a
browser that supports @font-face . You could, and probably should, list several fonts in the family.
Unfortunately, but not surprisingly, the various browsers aren't completely compatible across the
board when it comes to @font-face . Firefox and Safari support TrueType ( .ttf ) and OpenType
( .otf ), whereas Internet Explorer supports only the Embedded OpenType ( .eot ) format. These
inconsistencies on the browser front require a more detailed @font-face use:
@font-face {
font-family: 'MyWebFont';
src: url('MyWebFont.eot');
src: local('MyWebFont'), url('MyWebFont.otf') format('opentype');
}
Browsers that don't support the .eot format will ignore the first src property and value and use the
.otf format. Internet Explorer, on the other hand, will load the .eot font and then skip the second
src property.
The @font-face declaration truly heralds a sea-change in web design. Previously, whenever a non-
common font was required, the text had to be created in a graphics program like Photoshop and
then the image of that text was integrated into the web page as a background or foreground graphic.
By enabling text to be rendered as a true font rather than an image, the @font-face property keeps
all text searchable, selectable, and able to be copied — just as text should be. Figure 7-2 illustrates
what's possible with @font-face .
seTTinG TeXT size and Line HeiGHT
The size of the font for text on the Web is determined by the font-size property. You can use a
named, relative measurement such as large or small like this:
h1 { font-size: x-large; }