font

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

Как и с любым сокращенным свойством, любое значение, которое не указано, устанавливается в начальное значение (возможно, переопределяя значения, ранее установленные с использованием не сокращенных свойств). Свойства font-size-adjust и font-kerning хоть и не могут быть напрямую установлены с помощью 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:
  • it may optionally include values for:
  • 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 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.

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.

Формальный синтаксис

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

где
<font-variant-css21> = [ normal | small-caps ]

Примеры

/* 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: как указано
  • font-weight: ключевое слово или числовое значение, с bolder и lighter, трансформируемися в действительное значение
  • font-stretch: как указано
  • font-size: как указано, но с относительной длиной, конвертируемой в абсолютные длины
  • line-height: для процентов и значений длин, абсолютной длины, если другое не указано
  • font-family: как указано
Animation typeкак и у каждого из подсвойств этого свойства:

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

BCD tables only load in the browser