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 ...