HTML and CSS Reference
In-Depth Information
to SyntheSize or not to SyntheSize
The draft Css3 Fonts module specifies a new
font-synthesis
property, which controls whether a browser
is allowed to synthesize bold or italic. The property accepts the following values:
•
none
: All synthetic faces are disallowed.
•
weight
: synthetic bold is allowed.
•
style
: synthetic italic is allowed.
The default value is
weight style
, which allows the browser to synthesize both bold and italic. At the time
of this writing, no browser has yet implemented the
font-synthesis
property.
The use of a class for bold type in the preceding example was purely for demonstration purposes. The styles
in different2.css assign the bold and italic faces like this:
/* Omitted: four @font-face rules defining regular, bold, italic, and bold italic fonts. */
body {
font-family: 'AurulentSans Regular', sans-serif;
}
/* Headings and bold text */
h1, h2, h3, h4, h5, h6, b, strong {
font-family: 'AurulentSans Bold', sans-serif;
}
/* Regular italic */
i, em {
font-family: 'AurulentSans Italic', sans-serif;
}
/* Bold italic */
b i, h1 i, strong em {
font-family: 'AurulentSans BoldItalic', sans-serif;
}
The first three rules use type selectors to redefine the look of the body, headings, and bold and italic
elements. Defining the rule for bold italic is slightly more problematic, because it depends on how elements are
nested. This example uses descendant selectors for
<i>
tags nested inside
<b>
or
<h1>
elements, and for
<em>
nested inside
<strong>
. However, if the tags are nested the other way round, the descendant selectors need to be
reversed.
The HTML markup inside the
<body>
of different2.html looks like this:
<h1>The Lobster <i>Quadrille</i></h1>
<p>"Will you walk a little <i>faster</i>?" said a whiting to a snail.</p>
<p><b>"Will you walk a little <i>faster</i>?" said a whiting to a snail.</b></p>
Figure
5-5
shows how the page is rendered in Firefox 14 (left) and IE 9 (right).
