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.

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

font = 
[ (en-US) [ (en-US) <'font-style'> || (en-US) <font-variant-css2> || (en-US) <'font-weight'> || (en-US) <font-width-css3> ] (en-US)? (en-US) <'font-size'> [ (en-US) / <'line-height'> ] (en-US)? (en-US) <'font-family'> ] (en-US) | (en-US)
<system-family-name>

<font-variant-css2> =
normal | (en-US)
small-caps

<font-width-css3> =
normal | (en-US)
ultra-condensed | (en-US)
extra-condensed | (en-US)
condensed | (en-US)
semi-condensed | (en-US)
semi-expanded | (en-US)
expanded | (en-US)
extra-expanded | (en-US)
ultra-expanded

<system-family-name> =
caption | (en-US)
icon | (en-US)
menu | (en-US)
message-box | (en-US)
small-caption | (en-US)
status-bar

Примеры

css
/* 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
CSS Fonts Module Level 4
# font-prop
Начальное значениекак и у каждого из подсвойств этого свойства:
Применяется кall elements and text. Это также применяется к ::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