HTML and CSS Reference
In-Depth Information
Using Different Names
The Aurulent Sans font (
www.fontsquirrel.com/fonts/Aurulent-Sans
)
designed by Stephen G. Hartke is
available in four styles: regular, italic, bold, and bold italic. To demonstrate what happens when you use different
names for the fonts, different.css in the ch05/styles folder contains the following style rules:
@font-face {
font-family: 'AurulentSans Regular';
src: url('fonts/AurulentSans-Regular-webfont.eot');
src: url('fonts/AurulentSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/AurulentSans-Regular-webfont.woff') format('woff'),
url('fonts/AurulentSans-Regular-webfont.ttf') format('truetype'),
url('fonts/AurulentSans-Regular-webfont.svg') format('svg');
}
@font-face {
font-family: 'AurulentSans Bold';
src: url('fonts/AurulentSans-Bold-webfont.eot');
src: url('fonts/AurulentSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/AurulentSans-Bold-webfont.woff') format('woff'),
url('fonts/AurulentSans-Bold-webfont.ttf') format('truetype'),
url('fonts/AurulentSans-Bold-webfont.svg') format('svg');
}
body {
font-family: 'AurulentSans Regular', sans-serif;
}
.bold {
font-family: 'AurulentSans Bold', sans-serif;
}
The
@font-face
rules assign different names to the regular and bold versions of the font. The
body
selector
applies the regular font to all text, and the
bold
class uses the bold font.
■
Note
i've used a class for bold text to show what happens if the browser can't find the correct font weight.
This style sheet is attached to different.html, which contains the following HTML markup in the
<body>
of
the page:
<h1>The Lobster Quadrille</h1>
<h1 class="bold">The Lobster Quadrille</h1>
<p>"Will you walk a little faster?" said a whiting to a snail.</p>
<p><b>"Will you walk a little faster?" said a whiting to a snail.</b></p>
<p class="bold">"Will you walk a little faster?" said a whiting to a <b>snail</b>.</p>
The page contains the same level 1 heading twice and the same paragraph three times. Figure
5-1
shows
how Chrome 21 on Windows renders the page.
