Mozilla Developer NetworkTable of contents
- 1. Summary
- 2. Syntax
- 2.1. Values
- 3. Examples
- 4. Specifications
- 5. Browser compatibility
- 6. See also
« CSS « CSS Reference
Summary
The font CSS property is either a shorthand property for setting font-style
, font-variant
, font-weight
, font-size
, line-height
and font-family
, or a way to set the element's font to a system font, using specific keywords.
As with any shorthand CSS properties, the values which are not set in it are set to their individual initial values, eventually overriding values previously set using non-shorthand properties.
Note: There are few caveats when using the CSS
font shorthand. If these conditions are not met, the property is invalid and is entirely ignored.- Except when using a keyword, it is mandatory to define the value of both the
font-sizeand thefont-styleproperties. - Not all values of
font-variantare allowed. Only the values defined in CSS 2.1 are allowed, that isnormalandsmall-caps. - Though not directly settable by
font, the values offont-stretch,font-size-adjustandfont-kerningare also reset to their initial values. - The order of the values is not completely free:
font-style,font-variantandfont-weightmust be defined, if any, before thefont-sizevalue. Theline-heightvalue must be defined immediately after thefont-size, preceded by a mandatory/. Finally thefont-familyis mandatory and must be the last value defined.
- Initial value : see individual properties
- Applies to: all elements
- Inherited : yes
- Percentages: see individual properties
- Media:
visual - Computed value : see individual properties
Syntax
font:font-style||font-variant||font-weight]?font-size[ /line-height]?font-familyfont: system_font
Values
- font-style
- See the
font-styleCSS property. - font-variant
- See the
font-variantCSS property. - font-weight
- See the
font-weightCSS property. - font-size
- See the
font-sizeCSS property. - line-height
- See the
line-heightCSS property. - font-family
- See the
font-familyCSS property. - system_font
- Instead of specifying individual longhand properties, a keyword can be used to represent a specific system font:
Browsers implementing these often implements several more, prefixed, values; Gecko implementscaptionThe font used for captioned controls (e.g., buttons, drop-downs, etc.). iconThe font used to label icons. menuThe font used in menus (e.g., dropdown menus and menu lists). message-boxThe font used in dialog boxes. small-captionThe font used for labeling small controls. status-barThe font used in window status bars. -moz-window,-moz-document,-moz-desktop,-moz-info,-moz-dialog,-moz-button,-moz-pull-down-menu,-moz-listand-moz-field.
Examples
/* Set the font size to 12px and the line height to 14px. Set the font family to sans-serif */
p { font: 12px/14px sans-serif }
/* Set the font size to 80% of the parent element or default value (if no parent element present)
and set the font family to sans-serif */
p { font: 80% sans-serif }
/* Set the font weight to bold, the font-style to italic, the font size to large,
and the font family to serif. */
p { font: bold italic large serif }
/* Use the same font as the status bar of the window */
p { font: status-bar }
Specifications
- CSS 2.1 Fonts #font
- CSS 3 User interface #system-fonts Candidate recommendation, not yet implemented
Browser compatibility
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| Shorthand | 1.0 | 1.0 (1.0) | 3.0-4.0 | 3.5 | 1.0 (85) |
| System fonts | 1.0 | 1.0 (1.0) | 4.0-5.5 | 6.0 | 1.0 (85) |
| Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | ? | ? | ? | ? | ? |
See also
- The font-related CSS properties:
font,font-family,font-size,font-size-adjust,font-stretch,font-style,font-variant,font-weight,@font-face