CSS Font Styles
font
Sets multiple font attributes with one shortcut. At a minimum the font-size and font-family must be specified in that order.
css syntax
font: font-style font-variant font-weight font-size font-family
font-family
Sets a prioritized list of font family names. The last entry should be a generic family such as serif, sans-serif, cursive, fantasy, or monospace. Font names containing a space must be quoted.
Serif fonts have a small ornimentation at the ends of a letter which improves legibility for large text or printed material. Sans-serif fonts are easier to read with small fonts on computer displays. Monospace fonts are used for computer code so that columns line up. Cursive fonts mimic cursive or calligraphic hand writing. Fantasy fonts are extremely decorative fonts.
css syntax
font-family: font-family
example
font-family: Arial, Helvetica, sans-serif
font-size
Sets the size of an elements text. Font size may be either set in absolute terms using resolution dependent px units, resolution independent pt units, browser dependend absolute constants, or in relative terms using em units or browser dependent constants.
css syntax
font-size: size
Font size may be set using browser dependent absolute constants which corrospond to the old font-size values 1-7.
Example
font-size: xx-small | x-small | small | medium | large | x-large | xx-large
Font size may be set using browser dependent relative constants.
Example
font-size: smaller | larger
Font sizes may be set in 'em' units, 'pt' points, or 'px' pixels. There are advantages and disadvantages to each. Points are theoretically resolution independent. A 12pt font should render the same on a 72 pixel-per-inch monitor as on a 1200 pixel-per-inch laser printer.
Fonts specified in 'em' units are relative to the parent element. To avoid inconsistent presentation due to differing browser defaults, the font size for the body element should be set using absolute units such as pixels or points.
Examples
font-size: 12pt
font-size: 14px
font-size: 1.2em
font-style
Sets the font rendering to normal, italic or oblique styles. If the font set lacks an italic or oblique version, the browser alogrithmically slants the normal font to emulate an italic version.
css syntax
font-style: italic | normal | oblique
font-variant
If given the argument of "small-caps" the browser renders lowercase letters as smaller uppercase letters, such as those used for the css syntax which follows. See also text-transform.
css syntax
font-variant: normal | small-caps
font-weight
Sets the boldness of the font. CSS provides nine levels of boldness, with 100 being the lightest and 900 the boldest. Most font faces will not have all nine weights and most browsers will not produce nine distinct levels of boldness. The value of "normal" is equal to a font weight of 400 or 500, "bold" is equivalent to a font weight of 700.
css syntax
font-weight: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | bold | bolder | lighter | normal
