The font property is a shorthand property used to set the following styles of fonts:
First you should remember that the font-family and font-size are the minimum styles required for this style property. If you only need to style one of the font properties, then you should use the specific font property required, rather than the font shorthand property.
The Basic Font Styles: Font Family and Font Size
The font property needs to have the order correct to work in most browsers. The family is last with the font size just before it.
font: 1em "Times New Roman", Times, serif;See it in Action
Change the Line Height
Add the line height to your font style by placing it after the font size preceded by a slash. If you leave it off, the line height will be reflected by the font size and determined by the browser.
font: 1em/1.5em "Times New Roman", Times, serif;See it in Action
Make the Font Bold, Change to Small Caps, or Add Italics
Right before the font size is the font weight. If you leave it off, it will be assigned to "normal."
font: bold 1em/1.5em "Times New Roman", Times, serif;See it in Action
If you want the font to be displayed as small-caps, then add that in front of the weight. If you're not changing the font weight, simply leave it off the property.
font: small-caps bold 1em/1.5em "Times New Roman", Times, serif;See it in Action
The font style goes at the very front of the property.
font: italic small-caps bold 1em/1.5em "Times New Roman", Times, serif;See it in Action
System Fonts
One of the best things about CSS 2 is that you can now style your Web applications to integrate into the operating system that they are running on. If you build a Web application, you can add styles to affect the colors so that your page is colored like other offline applications. But many people don't realize that you can also affect the fonts so that the page has the same fonts as the system.
To change the font to the system fonts use one of the following font keywords:
- caption
Changes the font to the one used for captioned controls like buttons and drop-downs. - icon
Changes the font to the one used for icons. - menu
Changes the font to the one used for menu lists and dropdown menus. - message-box
Changes the font to the one used in dialog boxes. - small-caption
Changes the font to the one used for lableling small controls. - status-bar
Changes the font to the one used for window status bars.
There are a few things to keep in mind when using system fonts:
- You cannot set separate elements of system fonts, they are set as a whole and all at once.
- Once you've set a system font, you can affect things like the boldness of the font separately.
- If the system does not have a specific font defined, the browser will either intelligently substitute (for example, use a smaller version of the caption font for small-caption) or use a default font.
