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:

Значения

<'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.
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 }

Live sample

Спецификации

Спецификация Status Comment
CSS Fonts Module Level 3
Определение 'font' в этой спецификации.
Рекомендация Added support for font-stretch values.
CSS Level 2 (Revision 1)
Определение 'font-weight' в этой спецификации.
Рекомендация Added support for keywords.
CSS Level 1
Определение 'font' в этой спецификации.
Рекомендация Initial definition.

Начальное значениекак и у каждого из подсвойств этого свойства:
Применяется квсе элементы. Это также применяется к ::first-letter и ::first-line.
Наследуетсяда
Процентыкак и у каждого из подсвойств этого свойства:
  • font-size: относятся к размеру шрифта родителя
  • line-height: относятся к размеру шрифта самого элемента
Обработка значениякак и у каждого из подсвойств этого свойства:
  • font-style: как указано
  • font-variant (en-US): как указано
  • font-weight: ключевое слово или числовое значение, с bolder и lighter, трансформируемися в действительное значение
  • font-stretch (en-US): как указано
  • font-size: как указано, но с относительной длиной, конвертируемой в абсолютные длины
  • line-height: для процентов и значений длин, абсолютной длины, если другое не указано
  • font-family: как указано
Animation typeкак и у каждого из подсвойств этого свойства:

Поддержка браузерами

BCD tables only load in the browser