Fonts
CSS provides a very high level of control over the fonts that a page should use. It is possible to say what font to use, including what fallback fonts to use if the primary font is not available. It is possible to say what size the font should be, what style it should have, what decorations it should have, and what the height of a line of text should be.
Specifying the font
These can be defined specifying several fonts at one time. This is useful as you may specify a font that a person might not have and so at the same time you can specify a font that they do have. Every browser that uses CSS will have at least three fonts defined - monospace (usually Courier or similar), sans serif (usually Arial or similar) and serif (usually Times or similar). There are more but not all browsers will have them.
The font used will be the first one defined, unless the user does not have that font in which case it will be the second, and it will continue until it finds one the user does have. If you do not specify a generic font as the last font in the the chain, and no other specified font is available, it will revert to the browser's default font - typically a serif font.
Fonts are defined using the font-family declaration, and the list of possible fonts are specified in a comma separated list. If the name of a font is made up of more than one word, the name must be in quotes.
Three examples of this might be:
p { font-family: "Times New Roman", Times, serif; }
p { font-family: Arial, sans-serif; }
p { font-family: "Courier New", Courier, monospace; }Specifying the font size
It is possible to specify fonts in either relative or fixed size. The fixed sizes used are normally pixels or points, such as '12px', but the relative fonts are usually preferred, as they allow the user to use their own preference for font size, and their size can be changed in Internet Explorer for accessibility purposes (other browsers can resize all font size units, while Internet Explorer 7+ can only zoom the entire page if it uses fixed font sizes, and Internet Explorer 6- can do nothing).
The most commonly used relative font sizes are em, % and either smaller or larger. These sizes relate to the font size that would normally have been used for that element (except in cases where the browser itself uses a relative font size as the default for that element, such as with headings). A size of '1em' or '100%' is the default font size. Relative font sizes are multiplied, so if you specify a font size of '12px' on the body, '2em' on div elements, and '2em' on p elements, then a div in the body will have a font size of 24 pixels, and a paragraph in the div will have a font size of 48 pixels.
Font sizes are specified with the font-size declaration:
p { font-size: 0.7em; }Styling the font
There are three main types of styling that you can apply to text. One is the weight of the font, such as
font-weight: bold;. Another is the font style, such as font-style: italic;, and the last is
decoration, such as text-decoration: underline;
p {
font-weight: bolder;
font-style: oblique;
text-decoration: underline overline;
}Specifying the height of a line
The font itself uses more space than its own height. For example, it may have a font size of 12 pixels, but a line height of 15 pixels, meaning that there is a 3 pixel gap between lines of text. Typically, the default line height is about 1.1em (which is relative to the font size being used by the element). You can specify a line height using any of the normal units. To use no gap at all, you could use 1em or 100%.
p { line-height: 1.2em; }Combining the styles
The font declaration allows several of these styles to be specified at the same time. You can change as many of them as you want, using this syntax:
font: font-style font-weight font-size/line-height font-familyAn example of this would be:
font: italic bold 1.2em/1.1em serif;Last modified: 19 April 2009