Creating a Website: The Missing Manual, 3rd Edition

Basic Fonts

Using the CSS font properties, you can choose a font family, font weight (its boldness setting), and font size (see Table 6-3). Be prepared, however, for a bit of web-style uncertainty, as this is one case where life isn’t as easy as it seems.

Table 6-3. Font properties.

Property	Description	Common Values	Can Be Inherited?
font-family	A list of font names. The browser scans through the list until it finds a font that’s on your visitor’s computer. If it doesn’t find a supported font, it uses the standard font the browser always uses.	A font name (like Verdana, Times, or Arial) or a generic font-family name: serif, sans-serif, monospace.	Yes
font-size	Sets the size of the font.	A specific size, or one of these values: xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger.	Yes
font-weight	Sets the weight of the font (how bold it appears).	normal, bold, bolder, lighter.	Yes
font-style	Lets you apply italic formatting.	normal, italic.	Yes
font-variant	Lets you apply small caps, which turns lowercase letters into smaller capitals (LIKE THIS).	normal, small-caps.	Yes
text-decoration	Applies a few miscellaneous text changes, like underlining and strikeout. Technically speaking, these aren’t part of the font (the browser adds these).	none, underline, overline, line-through.	Yes
text-transform	Transforms text so that it’s all capitals or all lowercase.	none, uppercase, lowercase.	Yes

Although most CSS font properties are straightforward, the font-family property has a nasty surprise—it doesn’t ...