Fonts: Font properties
What are the major font properties?CSS allows you to set six font properties
font-family
Two values can be used:
family-name: this is specific type or font face you will use
More than one font type may be specified if they are separated by a comma
If the first specified font is not available, the browser selects the next one
If the font name is more than one word, use quotation marks ("Times New Roman")
generic-name: there are five generic font-family names
- Serif
- Sans-Serif
- Monospace
- Cursive
- Fantasy
To use this property, start with the font you want the user to use, then the next best option, and end with the generic font family
This way, you have a chance of asking for a font that is installed on the user's machine:
{ font-family: Arial, Geneva, Sans-Serif }
Typical fonts include:
Macintosh
- Serif: Palatino
- Sans-Serif: Helvetica, Geneva
- Cursive: Times
- Monospace: Courier
- Fantasy: Impact
Wintel
- Serif: Modern
- Sans-Serif: Arial
- Cursive: Times, Century Schoolbook
- Monospace: Courier New
- Fantasy: Teckton, Comic Sans MS
font-style
This property provides three options that can be applied to the current font
For the following values, the font will be switched to a Serif type
- Normal: This is the default setting
- Italic: This is typically available for most fonts
- Oblique: This is typically available for Serif fonts
font-variant
This property provides two options that can be applied to the current font
The default does not affect the current font, but the second option is interesting
- Normal: This is the default setting
- Small caps: This is a set of smaller capitalletters that are about 80% of the full sized letters
This property is not supported by all browsers (especially older ones)
You are here:
http://memex.lib.indiana.edu/hrosenba/www/Workshops/CSS/Demo/cssfonts2.html
Last updated 3.15.06 - H. Rosenbaum