font (CSS property)
| IE5.5+ | FF1+ | Saf1.3+ | Op9.2+ |
|---|---|---|---|
| Full | Full | Full | Full |
| Inherited | Initial | Version |
|---|---|---|
| Yes | CSS1, 2 |
Example
This style rule sets some font
properties for the element with ID
"sidebar":
#sidebar {
font: bold small-caps 0.8em/1.4
➥ Helvetica, Arial,
➥ "Luxi Sans", sans-serif;
}This style rule sets the font for the class
"dialog" to be the system font used for dialog boxes,
but changes the font size to twice that of the parent
element’s:
.dialog {
font: message-box;
font-size: 200%;
}Description
This property sets the font size and the font family, plus, optionally, the font style, font variant, font weight, and line height, for an element’s text content.
Value
The font size and font family must be specified. The font style, variant, and weight may be specified (in arbitrary order) before the font size. The line height may be specified, preceded by a slash character, between the font size and the font family.
Any omitted value will be set to its initial value, not its inherited value. See the individual properties for information on their initial values.
As an alternative to the aforementioned syntax, the value can be specified using one of the special keywords for system fonts. These keywords imply all of the font properties in one go, and can’t be combined with other property values such as a font weight or font size, although those traits can be modified in subsequent declarations. The keywords are:
caption- selects the font used for captioned controls such as buttons
icon- selects the font used to label icons
menu- selects the font used in menus
message-box- selects the font used in dialog boxes
small-caption- selects the font used for labeling small controls, or a smaller
version of the
captionfont status-bar- selects the font used in window status bars
Note that the system fonts can only be set with this shorthand
property; not with the font-family
property.
Compatibility
| IE | 5.5 | Full |
|---|---|---|
| 6.0 | Full | |
| 7.0 | Full | |
| Firefox | 1.0 | Full |
| 1.5 | Full | |
| 2.0 | Full | |
| Safari | 1.3 | Full |
| 2.0 | Full | |
| 3.0 | Full | |
| Opera | 9.2 | Full |
| 9.5 | Full |
Internet Explorer for Windows versions up to and
including 7 don’t support the value inherit.
User-contributed notes
There are no comments yet.
Add a note
To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.
