font-family
CSS defines 5 generic font families: (You can employ any of these families in a document by using the property font-family.)
- Serif fonts
These fonts are proportional and have serifs. A font is proportional if all characters in the font have different widths due to their various sizes. Serifs are the decorations on the ends of strokes within each character, such as little lines at the top and bottom of a lowercase l, or at the bottom of each leg of an uppercase A. - Sans-serif fonts
These fonts are proportional and do not have serifs. - Monospace fonts
Monospace fonts are not proportional. These fonts may or may not have serifs. If a font has uniform character widths, it is classified as monospace, regardless of the presence of serifs. - Cursive fonts
These fonts attempt to emulate human handwriting. Usually, they are composed largely of curves and have stroke decorations that exceed those found in serif fonts. For example, an uppercase A might have a small curl at the bottom of its left leg or be composed entirely of swashes and curls. Examples of cursive fonts are Zapf Chancery, Author, and Comic Sans. - Fantasy fonts
Such fonts are not really defined by any single characteristic other than our inability to easily classify them in one of the other families. A few such fonts are Western, Woodblock, and Klingon.
By combining specific font names with generic font families, you can create documents that come out, if not exact, at least close to your intentions.
h1 {font-family: Georgia, serif;}
Based on this list, a user agent will look for the fonts in the order they’re listed. If none of the listed fonts are available, then it will simply pick a serif font that is available.
p {font-family: Times, TimesNR, ‘New Century Schoolbook’, Georgia, ‘New York’, serif;}
font-weight
Values:
normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit
One of the numeric values (100, etc.), or one of the numeric values plus one of the relative values (bolder or lighter)
font-size
There are seven absolute-size values for font-size: xx-small, x-small, small, medium, large, x-large, and xx-large. These are not defined precisely, but are relative to each other:
p.one {font-size: xx-small;}
p.two {font-size: x-small;}
p.three {font-size: small;}
p.four {font-size: medium;}
p.five {font-size: large;}
p.six {font-size: x-large;}
p.seven {font-size: xx-large;}
The difference (or scaling factor) between one absolute size and the next should be about 1.5 going up the ladder, or 0.66 going down. Different user agents have assigned the “default” font size to different absolute keywords. Note that there are seven absolute-size keywords, just as there are seven font sizes (e.g., <font size=”5″>). The typical default font size was historically 3.
In a way, percentage values are very similar to the relative-size keywords. A percentage value is always computed in terms of whatever size is inherited from an element’s parent.
Note: Although font-size is inherited in CSS, it is the computed values that are inherited, not percentages.
font-style
- Italic text is a separate font face, with small changes made to the structure of each letter to account for the altered appearance. This is especially true of serif fonts, where, in addition to the fact that the text characters “lean,” the serifs may be altered in an italic face.
- Oblique text, on the other hand, is simply a slanted version of the normal, upright text.
font-variant
Values:
small-caps | normal | inherit
Purpose:
Turns fonts to capitalized characters, with the originally capitalized characters slightly larger than the non-capitalized ones.
font
h1 {font: italic 900 small-caps 30px Verdana, Helvetica, Arial, sans-serif;}
h2 {font: bold normal italic 24px Verdana, Helvetica, Arial, sans-serif;}
It’s important to realize, however, that this free-for-all situation applies only to the first three values of font. The last two are much stricter in their behavior. Not only must font-size and font-family appear in that order as the last two values in the declaration, but both must always be present in a font declaration.
So far, we’ve treated font as though it has only five values, which isn’t quite true. It is also possible to set the line-height using font, despite that fact that line-height is a text property, not a font property. It’s done as a sort of addition to the font-size value, separated from it by a forward slash (/):
body {font-size: 12px;}
h2 {font: bold italic 200%/1.2 Verdana, Helvetica, Arial, sans-serif;}
This addition of a value for line-height is entirely optional, just as the first three font values are. If you do include a line-height, remember that the font-size always comes before line-height, never after, and the two are always separated by a slash.
By Bryan Xu