font

Базовая линия Широко доступна

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с июля 2015 года.

Свойство font CSS сокращённое свойство задаёт все различные свойства шрифта элемента. В качестве альтернативы, оно задаёт шрифт элемента системным шрифтом.

Попробовать

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

Составные свойства

Это сокращённое свойство для следующих свойств CSS:

Синтаксис

/* font-size font-family */
font: 1.2em "Fira Sans", sans-serif;

/* font-size/line height font-family */
font: 1.2em/2 "Fira Sans", sans-serif;

/* font-style font-weight font-size font-family */
font: italic bold 1.2em "Fira Sans", sans-serif;

/* font-stretch font-variant font-size font-family */
font: ultra-condensed small-caps 1.2em "Fira Sans", sans-serif;

/* system font */
font: caption;

Свойство font может быть задано либо как единственное ключевое слово, которое выберет системный шрифт, либо как сокращённое свойство для различных свойств, связанных со шрифтом.

Если font задано как системное ключевое слово, то оно должно быть одним из: caption, icon, menu, message-box, small-caption, status-bar.

Если font задано как сокращённое свойство для нескольких свойств, связанных со шрифтом, то:

оно должно содержать значения для:
- <font-size>
- <font-family>
оно может необязательно содержать значения для:
font-style, font-variant и font-weight должны предшествовать font-size.
font-variant может указывать только значения, определённые в CSS 2.1, то есть normal и small-caps.
font-stretch может быть только одним значением-ключевым словом.
line-height должен следовать непосредственно за font-size, предваряясь "/", так: 16px/3.
font-family должно быть последним указанным значением.

Значения

<'font-style'>: См. свойство CSS font-style.
<'font-variant'>: См. свойство CSS font-variant.
<'font-weight'>: См. свойство CSS font-weight.
<'font-stretch'>: См. свойство CSS font-stretch.
<'font-size'>: См. свойство CSS font-size.
<'line-height'>: См. свойство CSS line-height.
<'font-family'>: См. свойство CSS font-family.

Значения системных шрифтов

caption: Системный шрифт, используемый для заголовков элементов управления (например, кнопок, раскрывающихся списков и т. д.).
icon: Системный шрифт, используемый для маркировки значков.
menu: Системный шрифт, используемый в меню (например, раскрывающихся меню и списках меню).
message-box: Системный шрифт, используемый в диалоговых окнах.
small-caption: Системный шрифт, используемый для маркировки небольших элементов управления.
status-bar: Системный шрифт, используемый в строках состояния окон.
Ключевые слова системных шрифтов с префиксом: Браузеры часто реализуют ещё несколько ключевых слов с префиксом: Gecko реализует -moz-window, -moz-document, -moz-desktop, -moz-info, -moz-dialog, -moz-button, -moz-pull-down-menu, -moz-list, и -moz-field.

Формальное определение

Начальное значение	как каждое из свойств сокращённого свойства: `font-style`: `normal` `font-variant`: `normal` `font-weight`: `normal` `font-stretch`: `normal` `font-size`: `medium` `line-height`: `normal` `font-family`: зависит от пользователя
Применимо к	всем элементам и тексту. Также применяется к `::first-letter` и `::first-line`.
Наследуется	да
Проценты	как каждое из свойств сокращённого свойства: `font-size`: относятся к размеру шрифта родительского элемента `line-height`: относятся к размеру шрифта самого элемента
Вычисленное значение	как каждое из свойств сокращённого свойства: `font-style`: как указано `font-variant`: как указано `font-weight`: ключевое слово или числовое значение как указано, с `bolder` и `lighter` преобразованы в фактическое значение `font-stretch`: как указано `font-size`: как указано, но с относительными величинами преобразованы в абсолютные величины `line-height`: для значений в процентах и длины, абсолютная длина, в противном случае как указано `font-family`: как указано
Тип анимации	как каждое из свойств сокращённого свойства: `font-style`: по типу вычисленного значения; `normal` анимируется как `oblique 0deg` `font-variant`: дискретная `font-weight`: вес шрифта `font-stretch`: растяжение шрифта `font-size`: длина `line-height`: либо число, либо длина `font-family`: дискретная

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

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

<font-style> = 
  normal                           |
  italic                           |
  oblique <angle [-90deg,90deg]>?  

<font-variant-css2> = 
  normal      |
  small-caps  

<font-weight> = 
  <font-weight-absolute>  |
  bolder                  |
  lighter                 

<font-width-css3> = 
  normal           |
  ultra-condensed  |
  extra-condensed  |
  condensed        |
  semi-condensed   |
  semi-expanded    |
  expanded         |
  extra-expanded   |
  ultra-expanded   

<font-size> = 
  <absolute-size>            |
  <relative-size>            |
  <length-percentage [0,∞]>  |
  math                       

<line-height> = 
  normal                     |
  <number [0,∞]>             |
  <length-percentage [0,∞]>  

<font-family> = 
  [ <family-name> | <generic-family> ]#  

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

<font-weight-absolute> = 
  normal             |
  bold               |
  <number [1,1000]>  

<length-percentage> = 
  <length>      |
  <percentage>  

<family-name> = 
  <string>         |
  <custom-ident>+  

<generic-family> = 
  <generic-script-specific>  |
  <generic-complete>         |
  <generic-incomplete>       

<generic-script-specific> = 
  generic( kai )       |
  generic( fangsong )  |
  generic( nastaliq )  

<generic-complete> = 
  serif       |
  sans-serif  |
  system-ui   |
  cursive     |
  fantasy     |
  math        |
  monospace   

<generic-incomplete> = 
  ui-serif       |
  ui-sans-serif  |
  ui-monospace   |
  ui-rounded

Примеры

Установка свойств шрифта

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

Живой пример

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

Спецификация
CSS Fonts Module Level 4 # font-prop

Совместимость браузеров

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`font`	1	12	1	3.5	1	18	4	14	1	1.0	4.4
`caption`	1	12	1	6	1	18	4	14	1	1.0	37
`font_stretch_support`	60	79	43	47	11	60	43	44	11	8.0	60
`icon`	1	12	1	6	1	18	4	14	1	1.0	37
`menu`	1	12	1	6	1	18	4	14	1	1.0	37
`message-box`	1	12	1	6	1	18	4	14	1	1.0	37
`small-caption`	1	12	1	6	1	18	4	14	1	1.0	37
`status-bar`	1	12	1	6	1	18	4	14	1	1.0	37

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/font