Name

font

Values:

[[ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family>] | caption | icon | menu | message-box | small-caption | status-bar | inherit

Initial value:

Refer to individual properties.

Applies to:

All elements.

Inherited:

Yes.

Percentages:

Calculated with respect to the parent element for <font-size> and with respect to the element’s <font-size> for <line-height>.

Computed value:

See individual properties (font-style, etc.).

Description:

This is a shorthand property used to set two or more aspects of an element’s font at once. It can also be used to set the element’s font to match an aspect of the user’s computing environment using keywords such as icon. If keywords are not used, the minimum font value must include the font size and family in that order.

Examples:

p {font: small-caps italic bold small/1.25em
Helvetica,sans-serif;}
p.example {font: 14px Arial;} /* technically correct,
although
generic font-families are encouraged for fallback
purposes */
.figure span {font: icon;}

Supported by:

Firefox, Internet Explorer, Opera, Safari.

Get CSS Pocket Reference, 3rd Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.