CSS, DHTML, and Ajax, Fourth Edition

CSS provides several options that allow you to set different levels of boldness for text. Many fonts have various weights associated with them; these weights have the effect of making the text look more or less bold (Table 3.8). CSS can take advantage of this feature (Figure 3.9).

Table 3.8. Font-Weight Values

VALUE

COMPATIBILITY

normal

IE3, FF1, S1, O3.5, CSS1

bold

IE3, FF1, S1, O3.5, CSS1

lighter

IE4, S1, O3.5, CSS1

bolder

IE4, S1, O3.5, CSS1

100-900[*]

IE4, FF1, S1, O3.5, CSS1

[*] Depending on available font weights

Figure 3.9. The difference between normal and bold text is evident here.

In this example (Figure 3.10), the H1 tag is set to be bolder (which it would normally be), but the H2 tag is set to be lighter, which has the effect of using the normal font. In reality, most fonts only support normal and bold, so relative values have an absolute effect. Notice also, though, that we can turn bold off in the middle of a paragraph of text by using normal or lighter to a child tag.

Figure 3.10. All the text has been set to bold except italicized words, which are a normal weight.

To define bold text in a CSS rule:

1.

font-weight:

Type the property name font-weight (Code 3.4), followed by a colon (:).

Code 3.4. The copy class is used to make boldface text. Italics within a paragraph with the copy class assigned have been set to non-bold.

[View full width]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD /xhtml1 strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>CSS, DHTML &amp; Ajax | Setting Bold, Bolder, Boldest</title> <style type="text/css" media="all"> body { font-size: 1.2em; font-family: Georgia, "Times New Roman", times, serif; font-weight: normal; } h1 { font-weight: bold; } h2 { font-weight: lighter; } p.copy { font-weight: bold; } p.copy em { font-weight: normal; } .author { font-weight: bold; } </style> </head> <body> <div > <h1>Alice's Adventures in Wonderland</h1> <p >Lewis Carroll</p> <h2>CHAPTER IV<br /> The Rabbit Sends in a Little Bill</h2> </div> <p >It was the White Rabbit, trotting slowly back again, and looking anxiously about as it went, as if it had lost something; and she heard it muttering to itself <em>'The Duchess! The Duchess! Oh my dear paws! Oh my fur and whiskers! She'll get me executed, as sure as ferrets are ferrets! Where CAN I have dropped them, I wonder?'</em> Alice guessed in a moment that it was looking for the fan and the pair of white kid gloves , and she very good-naturedly began hunting about for them, but they were nowhere to be seen--everything seemed to have changed since her swim in the pool, and the great hall, with the glass table and the little door, had vanished completely.</p> </body> </html>

2.

bold;

Type the value for the font-weight property, using one of the following options:

  • bold, which sets the font to boldface

  • bolder or lighter, which sets the font's weight to be bolder or lighter relative to its parent element's weight

  • A value from 100 to 900, in increments of 100, which increases the weight, based on alternative versions of the font that are available

  • normal, which overrides other weight specifications.

Tip

  • Use font-weight to add emphasis to text, but use it sparingly. If everything is bold, nothing stands out.

Font-Weight Numbers

Most fonts do not have nine weights, so if you specify a font-weight value that is not available, another weight is used, based on the following system:

  • 100 to 300 use the next-lighter weight, if available, or the next-darker

  • 400 and 500 may be used interchangeably

  • 600 to 900 use the next-darker weight, if available, or the next-lighter

Related

Категории