Свойство CSS `font-family`

font-family — это свойство CSS, задающее упорядоченный по приоритету список из одного или нескольких названий семейств шрифтов и/или общих названий семейств для выбранного элемента.

Попробуйте

font-family: "Georgia", serif;

font-family: "Gill Sans", sans-serif;

font-family: sans-serif;

font-family: serif;

font-family: cursive;

font-family: system-ui;

<section id="default-example">
  <p id="example-element">
    London. Michaelmas term lately over, and the Lord Chancellor sitting in
    Lincoln's Inn Hall. Implacable November weather. As much mud in the streets
    as if the waters had but newly retired from the face of the earth, and it
    would not be wonderful to meet a Megalosaurus, forty feet long or so,
    waddling like an elephantine lizard up Holborn Hill.
  </p>
</section>

section {
  font-size: 1.2em;
}

Значения разделяются запятыми, указывающими на то, что они являются альтернативами. Браузер выберет первый шрифт в списке, который установлен или может быть загружен с помощью директивы @font-face.

Часто удобно использовать сокращённое свойство font, чтобы задать font-size и другие связанные со шрифтом свойства одновременно.

Всегда следует включать в список font-family как минимум одно общее название семейства, поскольку нет гарантии, что какой-либо конкретный шрифт будет доступен. Это позволяет браузеру при необходимости выбрать подходящий резервный шрифт.

Свойство font-family задаёт список шрифтов в порядке убывания приоритета. Выбор шрифта не прекращается на первом шрифте из списка, который есть в системе пользователя. Выбор шрифта выполняется для каждого символа отдельно, поэтому, если в доступном шрифте отсутствует глиф для нужного символа, проверяются следующие шрифты. Если шрифт доступен только в некоторых стилях, вариантах или размерах, эти свойства также могут влиять на выбор семейства шрифтов.

Синтаксис

/* A font family name and a generic family name */
font-family: "Gill Sans Extrabold", sans-serif;
font-family: "Goudy Bookletter 1911", sans-serif;

/* A generic family name only */
font-family: serif;
font-family: sans-serif;
font-family: monospace;
font-family: cursive;
font-family: fantasy;
font-family: system-ui;
font-family: ui-serif;
font-family: ui-sans-serif;
font-family: ui-monospace;
font-family: ui-rounded;
font-family: math;
font-family: fangsong;

/* Global values */
font-family: inherit;
font-family: initial;
font-family: revert;
font-family: revert-layer;
font-family: unset;

Свойство font-family задаёт одно или несколько семейств шрифтов, разделённых запятыми. Каждое семейство шрифтов задаётся значением типа <family-name> или <generic-name>.

В примере ниже указаны два семейства шрифтов: первое — с <family-name>, второе — с <generic-name>:

font-family: "Gill Sans Extrabold", sans-serif;

Значения

<family-name>

Название семейства шрифтов. Оно должно быть либо одним значением <string>, либо последовательностью значений <custom-ident>, разделённых пробелами. Строковые значения должны быть заключены в кавычки, но могут содержать любые символы Юникода. Пользовательские идентификаторы не заключаются в кавычки, однако некоторые символы необходимо экранировать.

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

См. также раздел Допустимые названия семейств.

<generic-name>

Общие семейства шрифтов — это резервный механизм, позволяющий сохранить часть намерений автора таблицы стилей, если ни один из указанных шрифтов недоступен. Общие названия семейств являются ключевыми словами и не должны заключаться в кавычки. Общее семейство шрифтов должно быть последним элементом в списке названий семейств шрифтов. Определены следующие ключевые слова:

serif

Глифы имеют завершающие штрихи, расширяющиеся или сужающиеся окончания либо настоящие засечки.

Например: Lucida Bright, Lucida Fax, Palatino, Palatino Linotype, Palladio, URW Palladio, serif.

sans-serif

Штрихи глифов имеют простые окончания.

Например: Open Sans, Fira Sans, Lucida Sans, Lucida Sans Unicode, Trebuchet MS, Liberation Sans, Nimbus Sans L, sans-serif.

monospace

Все глифы имеют одинаковую фиксированную ширину.

Например: Fira Mono, DejaVu Sans Mono, Menlo, Consolas, Liberation Mono, Monaco, Lucida Console, monospace.

Примечание: Если для font-family задано единственное ключевое слово monospace, а font-size не задано, браузеры используют пользовательское предпочтение размера моноширинного шрифта, который часто меньше размера пропорциональных шрифтов. Подробнее об этом и способах управления см. в разделе Размер моноширинного шрифта.

cursive

Глифы курсивных шрифтов обычно имеют соединительные штрихи или другие курсивные особенности, отличающие их от начертаний курсивного типа. Глифы частично или полностью соединены, и результат больше напоминает рукописный текст, написанный пером или кистью, чем печатные буквы.

Например: Brush Script MT, Brush Script Std, Lucida Calligraphy, Lucida Handwriting, Apple Chancery, cursive.

fantasy

Декоративные шрифты, содержащие игривые изображения символов.

Например: Papyrus, Herculanum, Party LET, Curlz MT, Harrington, fantasy.

system-ui

Глифы берутся из стандартного шрифта пользовательского интерфейса на данной платформе. Поскольку типографские традиции во всём мире существенно различаются, это общее семейство предназначено для гарнитур, которые не вписываются однозначно в другие общие семейства.

Примечание: Как следует из названия, system-ui предназначено для того, чтобы элементы интерфейса выглядели как в нативных приложениях, а не для набора больших текстовых абзацев. Для некоторых пользователей отображаемая гарнитура может оказаться нежелательной — например, стандартный шрифт CJK в Windows может плохо отображать латинские письменности, а атрибут lang может не влиять на отображаемый шрифт. Некоторые операционные системы не позволяют настраивать system-ui, тогда как браузеры обычно позволяют настраивать семейство шрифтов sans-serif. Для больших текстовых абзацев используйте sans-serif или другое семейство шрифтов, не предназначенное для интерфейса.

ui-serif

Стандартный шрифт пользовательского интерфейса с засечками.

ui-sans-serif

Стандартный шрифт пользовательского интерфейса без засечек.

ui-monospace

Стандартный моноширинный шрифт пользовательского интерфейса.

ui-rounded

Стандартный шрифт пользовательского интерфейса с закруглёнными формами.

math

Шрифт, учитывающий особые требования к оформлению математических выражений: надстрочные и подстрочные индексы, скобки, охватывающие несколько строк, вложенные выражения и двойные штрихованные глифы с различными значениями. Таблицы стилей пользовательского агента могут задавать math { font-family: math }, чтобы элемент <math> по умолчанию использовал подходящие шрифты.

fangsong

Особый стиль китайских иероглифов, занимающий промежуточное положение между стилем сун с засечками и курсивным стилем кай. Этот стиль часто используется в официальных документах.

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

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

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

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

<generic-family> = 
  <generic-complete> |
  <generic-incomplete> |
  emoji |
  fangsong

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

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

Примеры

Некоторые распространённые семейства шрифтов

.serif {
  font-family: "Times", "Times New Roman", "Georgia", serif;
}

.sansserif {
  font-family: "Verdana", "Helvetica", "Arial", sans-serif;
}

.monospace {
  font-family: "Lucida Console", "Courier New", monospace;
}

.cursive {
  font-family: cursive;
}

.fantasy {
  font-family: fantasy;
}

.math {
  font-family: math;
}

.fangsong {
  font-family: fangsong;
}

div {
  margin: 0.5rem;
}

<div class="serif">This is an example of a serif font.</div>

<div class="sansserif">This is an example of a sans-serif font.</div>

<div class="monospace">This is an example of a monospace font.</div>

<div class="cursive">This is an example of a cursive font.</div>

<div class="fantasy">This is an example of a fantasy font.</div>

<div class="fangsong">This is an example of a fangsong font.</div>

<div class="math">This is an example of a math font: ℝ, ∫, ∑…</div>

Размер моноширинного шрифта

Браузеры хранят отдельные предпочтения размера шрифта по умолчанию для пропорциональных шрифтов (таких как serif и sans-serif) и моноширинных шрифтов. Типичные значения по умолчанию — 16px для пропорциональных шрифтов и 13px для моноширинных.

Если для font-family задано единственное ключевое слово monospace, браузеры применяют предпочтительный размер моноширинного шрифта. Если пользователи не меняли настройки браузера и значение font-size не задано явно, моноширинный текст может отображаться меньше окружающего содержимого. То же уменьшение применяется к элементам, для которых таблица стилей пользовательского агента задаёт font-family: monospace, например к <code> и <pre>.

Если значение font-family включает более одного семейства, даже если это значение monospace, monospace, браузеры не применяют предпочтительный размер моноширинного шрифта и отображают текст с унаследованным значением font-size. Поэтому объявление font-family: monospace, monospace (или названного моноширинного шрифта, за которым следует monospace) отображается того же размера, что и окружающий пропорциональный текст. Такое поведение не определено в CSS, но одинаково реализовано в основных движках браузеров.

<p class="proportional">
  This proportional text is at the default size; generally 16px.
</p>
<p class="mono-only">
  This monospace text is at the preferred size for monospace fonts; generally
  13px.
</p>
<p class="mono-list">
  This is in "monospace, monospace" font, rendered at the same size as
  proportional text; generally 16px.
</p>

.mono-only {
  font-family: monospace;
}

.mono-list {
  font-family: monospace, monospace;
}

Если вы не меняли размер шрифта в настройках браузера, первый и последний абзацы будут иметь одинаковый размер шрифта — предпочтительный размер, заданный браузером. Средний абзац будет отображаться с предпочтительным размером моноширинного шрифта, который обычно меньше предпочтительного размера для остального текста.

Допустимые названия семейств

Следующие объявления допустимы:

font-family: "Goudy Bookletter 1911", sans-serif;

Следующие объявления недопустимы:

font-family: Goudy Bookletter 1911, sans-serif;
font-family: Red/Black, sans-serif;
font-family: "Lucida" Grande, sans-serif;
font-family: Ahem!, sans-serif;
font-family: test@foo, sans-serif;
font-family: #POUND, sans-serif;
font-family: Hawaii 5-0, sans-serif;

Следующий пример технически допустим, но не рекомендуется:

font-family:
  Gill Sans Extrabold,
  sans-serif;

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

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

См. также

• font-style
• font-weight
• font-variant-emoji
• Атрибут SVG font-family
• Изучение: основы оформления текста и шрифтов