CSS свойство font

Определение и применение

CSS свойство font устанавливает все свойства шрифта в одном объявлении.

Свойства, которые можно установить:

• font-style (стиль шрифта)
• font-variant (капитель - малые заглавные)
• font-weight (жирность шрифта)
• font-size (размер шрифта) / line-height (задает расстояние между строками)
• font-family (семейство шрифта элемента)

Размер и семейство шрифта обязательны. Необязательные стиль, вариант, насыщенность и ширину шрифта указывают перед размером, а межстрочный интервал — после размера через /. Пропущенные значения сбрасываются к начальным значениям.

Попробуйте значения font

<div class="demo-target">
  Изучаем CSS: оформление текста помогает читать и понимать страницу.
</div>

.demo-target {
  box-sizing: border-box;
  width: 100%;
  max-width: 300px;
  padding: 16px;
  border: 2px solid #245a85;
  background: #fff3d6;
  color: #172c3d;
  font: 18px/1.5 system-ui;
  font: 16px/1.5 serif;
}

.demo-target {
  box-sizing: border-box;
  width: 100%;
  max-width: 300px;
  padding: 16px;
  border: 2px solid #245a85;
  background: #fff3d6;
  color: #172c3d;
  font: 18px/1.5 system-ui;
  font: italic 20px/1.5 serif;
}

.demo-target {
  box-sizing: border-box;
  width: 100%;
  max-width: 300px;
  padding: 16px;
  border: 2px solid #245a85;
  background: #fff3d6;
  color: #172c3d;
  font: 18px/1.5 system-ui;
  font: 700 18px/1.6 monospace;
}

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

Спецификация: CSS fonts

✓Поддерживается во всех основных браузерах с 2015 года.

Показать браузеры

ВсеКомпьютерыМобильные

Совместимостьcss.properties.font

Возможность	Компьютеры					Мобильные
	ChromeChrome	EdgeEdge	FirefoxFirefox	OperaOpera	SafariSafari	Chrome AndroidChromeAndroid	Firefox for AndroidFirefoxAndroid	Opera AndroidOperaAndroid	Safari on iOSSafariiOS	Samsung BrowserSamsungAndroid	WebView AndroidWebViewAndroid	WebView on iOSWebViewiOS
font	✓1	✓12	✓1	✓3.5	✓1	✓18	✓4	✓14	✓1	✓1.0	✓4.4	✓1
caption	✓1	✓12	✓1	✓6	✓1	✓18	✓4	✓14	✓1	✓1.0	✓37	✓1
font-width keyword values in shorthand	✓60	✓79	✓43	✓47	✓11	✓60	✓43	✓44	✓11	✓8.0	✓60	✓11
icon	✓1	✓12	✓1	✓6	✓1	✓18	✓4	✓14	✓1	✓1.0	✓37	✓1
menu	✓1	✓12	✓1	✓6	✓1	✓18	✓4	✓14	✓1	✓1.0	✓37	✓1
message-box	✓1	✓12	✓1	✓6	✓1	✓18	✓4	✓14	✓1	✓1.0	✓37	✓1
small-caption	✓1	✓12	✓1	✓6	✓1	✓18	✓4	✓14	✓1	✓1.0	✓37	✓1
status-bar	✓1	✓12	✓1	✓6	✓1	✓18	✓4	✓14	✓1	✓1.0	✓37	✓1
Ещё 7 значений · ✓ поддерживаются везде более 3 летСвернуть

✓поддерживается◐с ограниченияминет поддержки?нет данных≤31 — не позднее версии 31

CSS синтаксис:

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

/* Глобальные значения */
font: initial | inherit | unset | revert | revert-layer;

|| — одно или несколько значений в любом порядке; | — выбор варианта; [ ] — группа, а внутри типа — допустимый диапазон; ? — необязательная часть; # — список через запятую; / — буквальный разделитель.

JavaScript синтаксис:

element.style.font = "italic small-caps bold 12px/30px courier";

Начальное значение свойства

• font-style — normal;
• font-variant — normal;
• font-weight — normal;
• font-stretch — normal;
• font-size — medium;
• line-height — normal;
• font-family — зависит от браузера.

Значения свойства

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

CSS Fonts — спецификация font.

Наследуется

Да.

Анимируемое

Зависит от составляющих свойств: font-style, font-variant, font-weight, font-stretch, font-size, line-height, font-family. Числовые значения и цвета могут изменяться плавно; дискретные значения переключаются.

Примеры, попробуйте сами

Краткая запись шрифта

Измените размер 20px и межстрочный интервал 1.8. В краткой записи размер и семейство обязательны.

base.css

CSS

* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color: #172c3d;
}
section {
    margin-bottom: 24px;
    min-width: 0;
}
h3 {
    margin: 0 0 12px;
    font-size: 16px;
}
.item {
    padding: 8px;
    min-width: 0;
    background: #c5dbea;
    border: 1px solid #35658a;
    overflow-wrap: anywhere;
}

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Краткая запись шрифта</title>
  </head>
  <body>
    <section>
      <h3>Вариант A</h3>
      <div class="sample first">
        Учебный текст помогает увидеть изменение свойства. Сравните строки, расстояния и положение содержимого. Учебный
        текст помогает увидеть изменение свойства. Сравните строки, расстояния и положение содержимого.
      </div>
    </section>
    <section>
      <h3>Вариант B</h3>
      <div class="sample second">
        Учебный текст помогает увидеть изменение свойства. Сравните строки, расстояния и положение содержимого. Учебный
        текст помогает увидеть изменение свойства. Сравните строки, расстояния и положение содержимого.
      </div>
    </section>
  </body>
</html>

style.css

CSS

.first {
    font: 16px/1.5 sans-serif;
}
.second {
    font: italic bold 20px/1.8 serif;
}