This is a shorthand property notation based on a traditional typography
shorthand method of specifying values for multiple properties related
to fonts ('font-style', 'font-variant', 'font-weight', 'font-size',
'line-height', and 'font-family'.) Defaults for this shorthand method
match those used for each property listed individually. If properties
are omitted from this shorthand notation, they are assumed to carry
their individual default values.
CSS2 introduces the capability of setting a font to a system font via
this property. This capability is only possible with the 'font'
shorthand (they can't be set with 'font-family') - altering the
capability of this property to be more than the sum of the other
individual properties it can set. After setting a system font,
individual font properties can be applied to the result to customize
the font behavior. If an indicated system font type is not available
a browser default font should be used.
Allowed Values
inherit
[CSS2|CSS2.1]
[N6|O7|S1]
Type: Explicit
Description:
Explicitly sets the value of this property to that of the parent.
[font-style]
[CSS1|CSS2|CSS2.1]
[IE3|N4B2|O3.5|S1]
Type: NA
Description:
See the individual property for details on
syntax and allowed values.
[font-variant]
[CSS1|CSS2|CSS2.1]
[IE4|N6|O3.5|S1]
Type: NA
Description:
See the individual property for details on
syntax and allowed values.
[font-weight]
[CSS1|CSS2|CSS2.1]
[IE3|N4B2|O3.5|S1]
Type: NA
Description:
See the individual property for details on
syntax and allowed values.
[font-size]
[CSS1|CSS2|CSS2.1]
[IE3B1|N4B2|O3.5|S1]
Type: NA
Description:
See the individual property for details on
syntax and allowed values.
[line-height]
[CSS1|CSS2|CSS2.1]
[IE3B1|N4B2|O3.5|S1]
Type: NA
Description:
See the individual property for details on
syntax and allowed values.
[font-family]
[CSS1|CSS2|CSS2.1]
[IE3B1|N4B2|O3.5|S1]
Type: NA
Description:
See the individual property for details on
syntax and allowed values.
caption|icon|menu
[CSS2|CSS2.1]
[IE4|N6|O6]
Type: Explicit
Description:
These values refer to fonts that are already in use for a specific purpose by the
browser or system. caption: Captioned controls (buttons,
drop-downs, etc.) icon: Icon labels. menu: Dropdown menus.
message-box|small-caption|status-bar
[CSS2|CSS2.1]
[IE5.5|N6|O6]
Type: Explicit
Description:
These values refer to fonts that are already in use for a specific purpose by the
browser or system. message-box: Dialog box text. small-caption: Fonts used for 'small
controls'. [no explanation or example for this is given in CSS2;
this could possibly be a font used for something like a 'tooltip' - ed] status-bar: Fonts used for window status bars.
messagebox|smallcaption|statusbar
[IE4]
Type: Explicit
Description:
These values refer to fonts that are already in use for a specific purpose by the
browser or system. messagebox: Dialog box text. smallcaption: Fonts used for 'small
controls'. [no explanation or example for this is given in CSS2;
this could possibly be a font used for something like a 'tooltip' - ed] statusbar: Fonts used for window status bars.
Description:
These values refer to fonts that are already in use for a specific purpose by the
browser or system. Their system-purpose should be self-explanatory from their
name, but neither CSS3 nor Netscape explain what system components these keywords must
map to.
- The "inherit" value is listed in the standards for this property, although
the property is itself inherited. This means it is impossible to check
to see if this value is actually supported in any browser. Mozilla began
generally supporting "inherit" where appropriate in version 6.x, and
Opera beginning mostly in 7.x. IE does not yet support "inherit" anywhere
yet. So, for all inherited properties, support information for the
"inherit" value will be listed as beginning in these respective versions.
Internet Explorer
3.0:
- This version does not allow the specification of the
[font-style], [font-variant], and [font-weight] sub-properties
via this property. The CSS1 specification was not complete when
the browser was released and these sub-properties were added to
the syntax later.
4.0-5.0:
- The special UI font names 'messagebox',
'smallcaption' and 'statusbar' that IE supports
are not the same as those stated in CSS2
('message-box', 'small-caption' and 'statusbar'.) IE4-5 does
NOT support these CSS2 names at all. IE does start
supporting the correct names beginning in IE5.5.
Netscape
4.x:
- Reported elsewhere: This property has no effect if specified
in an inline style along with margin properties.
- If you use the 'font' property, you MUST specify
BOTH the 'font-size' and 'font-family' sub-components
of this property or else the style declaration will be ignored -
even if you have also set the 'font-size' and 'font-family'
properties individually for the same selector! Specifying both
of these sub-properties for 'font' is actually required under
the specifications, but Netscape is the only browser that
requires it. IE and Opera are fine if you only use one of these.