font

CSS-свойство font является сокращением для font-style, font-variant (en-US), font-weight, font-stretch (en-US), font-size, line-height, и font-family. Кроме того, он позволяет установить системный шрифт для элементов интерфейса.

Как и с любым сокращённым свойством, любое значение, которое не указано, устанавливается в начальное значение (возможно, переопределяя значения, ранее установленные с использованием не сокращённых свойств). Свойства font-size-adjust (en-US) и font-kerning (en-US) хоть и не могут быть напрямую установлены с помощью font, но они также сбрасываются к своим начальным значениям.

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:

• it must include values for:
  • <font-size>
  • <font-family>
• it may optionally include values for:
  • <font-style>
  • <font-variant> (en-US)
  • <font-weight>
  • <font-stretch> (en-US)
  • <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.

<'font-style'>

See the font-style CSS property.

<'font-variant'>

See the font-variant (en-US) CSS property.

<'font-weight'>

See the font-weight CSS property.

<'font-stretch'>

See the font-stretch (en-US) 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.

System font values

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 keywords

Browsers 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.

[ (en-US) [ (en-US) <'font-style'> || (en-US) <font-variant-css21> || (en-US) <'font-weight'> || (en-US) <'font-stretch'> (en-US) ] (en-US)? (en-US) <'font-size'> [ (en-US) / <'line-height'> ] (en-US)? (en-US) <'font-family'> ] (en-US) | (en-US) caption | (en-US) icon | (en-US) menu | (en-US) message-box | (en-US) small-caption | (en-US) status-bar
где 
<font-variant-css21> = [ (en-US) normal | (en-US) small-caps ] (en-US)

/* 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 }