font
Quick Summary for font
font
CSS shorthand property sets all the different properties of an element's font. Alternatively, it sets an element's font to a system font.
Code Usage for font
/* 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). 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 }
More Details for font
font
The font
CSS shorthand property sets all the different properties of an element's font. Alternatively, it sets an element's font to a system font.
As with any shorthand property, any individual value that is not specified is set to its corresponding initial value (possibly overriding values previously set using non-shorthand properties). Though not directly settable by font
, the longhands font-size-adjust
and font-kerning
are also reset to their initial values.
Constituent properties
This property is a shorthand for the following CSS properties:
font-family
font-size
font-stretch
font-style
font-variant
font-weight
line-height
Syntax
The font
property may be specified as either a single keyword, which will select a system font, or as a shorthand for various font-related properties.
If font
is specified as a system keyword, it must be one of: caption
, icon
, menu
, message-box
, small-caption
, status-bar
.
If font
is specified as a shorthand for several font-related properties, then:
<font-size>
<font-family>
it may optionally include values for: <font-style>
<font-variant>
<font-weight>
<font-stretch>
<line-height>
font-style
, font-variant
and font-weight
must precede font-size
font-variant
may only specify the values defined in CSS 2.1, that is normal
and small-caps
font-stretch
may only be a single keyword value. line-height
must immediately follow font-size
, preceded by "/", like this: "16px/3
" font-family
must be the last value specified. Values
<'font-style'>
See the font-style
CSS property.
<'font-variant'>
See the font-variant
CSS property.
<'font-weight'>
See the font-weight
CSS property.
<'font-stretch'>
See the font-stretch
CSS property.
<'font-size'>
See the font-size
CSS property.
<'line-height'>
See the line-height
CSS property.
<'font-family'>
See the font-family
CSS property.
caption
The system font used for captioned controls (e.g., buttons, drop-downs, etc.).
icon
The system font used to label icons.
menu
The system font used in menus (e.g., dropdown menus and menu lists).
message-box
The system font used in dialog boxes.
small-caption
The system font used for labeling small controls.
status-bar
The system font used in window status bars.
Prefixed system font keywordsBrowsers often implement several more, prefixed, keywords: Gecko implements -moz-window
, -moz-document
, -moz-desktop
, -moz-info
, -moz-dialog
, -moz-button
, -moz-pull-down-menu
, -moz-list
, and -moz-field
.
Formal definition
Initial value | as each of the properties of the shorthand:font-style : normal font-variant : normal font-weight : normal font-stretch : normal font-size : medium line-height : normal font-family : depends on user agent |
---|---|
Applies to | all elements. It also applies to ::first-letter and ::first-line . |
Inherited | yes |
Percentages | as each of the properties of the shorthand:font-size : refer to the parent element's font sizeline-height : refer to the font size of the element itself |
Computed value | as each of the properties of the shorthand:font-style : as specifiedfont-variant : as specifiedfont-weight : the keyword or the numerical value as specified, with bolder and lighter transformed to the real valuefont-stretch : as specifiedfont-size : as specified, but with relative lengths converted into absolute lengthsline-height : for percentage and length values, the absolute length, otherwise as specifiedfont-family : as specified |
Animation type | as each of the properties of the shorthand:font-style : discretefont-variant : discretefont-weight : a font weightfont-stretch : a font stretchfont-size : a lengthline-height : either number or lengthfont-family : discrete |
Formal syntax
[ [ <'font-style'> || <font-variant-css21> || <'font-weight'> || <'font-stretch'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-barwhere
<font-variant-css21> = [ normal | small-caps ]
Examples
Setting font properties
/* 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). 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 }
Live sample
Specifications
Specification |
---|
CSS Fonts Module Level 4 # font-prop |
See also
font-style
font-weight
Fundamental text and font styling Last modified: Sep 20, 2021, by MDN contributors
Select your preferred language English (US)DeutschEspañolFrançais日本語한국어PolskiРусский中文 (简体) Change language