Wednesday, September 17, 2008

The font-family Property

The CSS property font-family is used to specify the font-family to be used by an (X)HTML document element.
The value of this property is either a single string or keyword or a comma-separated list of strings or keywords . If the string has any spaces in it, then it must be enclosed in quotes.
Example: p { font-family: "Times New Roman", "Georgia", "Times", serif; }
Note that the quote marks are optional if the font name does not have spaces. Therefore the above rule can also be written as:
p {font-family: "Times New Roman", Georgia, Times, serif;} If the enclosing quote marks of Times New Roman are omitted, then the font family name may not be matched.
Note that the generic font-family names are keywords (not strings) therefore they must not be enclosed in quotes. Any text that is quoted is considered a string and therefore the name of a font, not a keyword. Also, if the font-family keyword is used in inline styles, using the style attribute, the quotes used for strings should be single quotes if the attribute uses double and vice versa.
Here is list of generic font family names and their CSS keywords:
Serif Fonts
Sans-serif Fonts
Monospace Fonts
Cursive Fonts
Fantasy Fonts
The keyword fantasy doesn't always work - the recognized fantasy fonts may not be installed on the computer.
At the end of a list of font-families, a generic font family is usually specified so that in case none of the specified font-families are found, the browser can choose any available font from a generic font-family.
The browser checks the availability of font-families starting from the left most font-family in the comma-separated list. The browser uses the first available font-family.
The font-family property is inherited (from ancestor elements).

No comments: