< Previous - Add a Style Sheet | Quick CSS Course (5 days) | Beginning CSS Articles | Next - Adjust Text with CSS >
font-family:
The font family defines the face of the font, such as Geneva, Times New Roman, or fantasy. You list the font families you'd like your property to use in order of preference separated by a comma, with multiple word font names indicated in quotes:
font-family : "Times New Roman", Courier, serif;font-size:
Defines the size of the font. There are four types of sizes:
- absolute - based on the browser default (medium):
xx-small, x-small, small, medium, large, x-large, and xx-large - relative - relative to the current size:
smaller or larger - length - a number with a unit of measure:
points (pt), pixels (px), centimeters (cm), milimeters (mm), inches (in), ems (em), or exes (ex) - percentage - a number relative to the current size
%
font-weight:
Defines the boldness of the font. It can be normal (the default), bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, or 900.
font-style:
Defines if the font is italic or oblique. It can be defined as normal (the default), italic, or oblique.
font-variant:
Changes the font to small-caps. It can be defined as normal (the default) or small-caps.
font:
This is a shorthand property. It allows you to define all of the above font styles, plus the line height of your text.
font: font-style font-variant font-weight font-size/line-height font-family;Other Font Properties:
CSS 3 brings us a lot of additional font properties to style fonts. Some work now and some don't. Always be sure to test in your browsers.
Dynamic Fonts:
Dynamic fonts allow you to define a font face or property that isn't necessarily on the customer's computer. They are also sometimes called embedded fonts. They are not widely supported, so be sure to test before you rely on them.
