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

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

Specification 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как и у каждого из подсвойств этого свойства:
Канонический порядокпорядок появления в формальной грамматике значений

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
fontChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1IE Полная поддержка 3Opera Полная поддержка 3.5Safari Полная поддержка 1WebView Android Полная поддержка ≤37Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка 1Samsung Internet Android Полная поддержка Да
Support for font-stretch values in shorthandChrome Полная поддержка 60Edge Нет поддержки НетFirefox Полная поддержка 43IE Нет поддержки НетOpera Полная поддержка 47Safari Полная поддержка 11WebView Android Полная поддержка 60Chrome Android Полная поддержка 60Firefox Android Полная поддержка 43Opera Android Полная поддержка 44Safari iOS Полная поддержка 11Samsung Internet Android Полная поддержка 8.0
System fontsChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1IE Полная поддержка 4Opera Полная поддержка 6Safari Полная поддержка 1WebView Android Полная поддержка 37Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4Opera Android ? Safari iOS Полная поддержка 1Samsung Internet Android ?

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Совместимость неизвестна  
Совместимость неизвестна