Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

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

/* Семейство шрифтов и общее название шрифта */
font-family: Gill Sans Extrabold, sans-serif;
font-family: "Goudy Bookletter 1911", sans-serif;

/* Только общие названия */
font-family: serif;
font-family: sans-serif;
font-family: monospace;
font-family: cursive;
font-family: fantasy;
font-family: system-ui;

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

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

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

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

Важно: Свойство font-family определяет список шрифтов в приоритете от высшего к низшему. Процесс выбора шрифта не останаливается после первого найденного шрифта в системе пользователя. Шрифт выбирается для каждого знака отдельно, поэтому если для определённой буквы текущий доступный шрифт не имеет символического знака, пробуются следующий по списку шрифт. (Однако, это не работает в Internet Explorer 6 и ранее.) Когда шрифт доступен только в некоторых styles, variants, или sizes, эти свойства могут так же влиять на выбор шрифта.

Начальное значениезависит от браузера
Применяется квсе элементы. Это также применяется к ::first-letter и ::first-line.
Наследуетсяда
Отображениевизуальный
Обработка значениякак указано
Animation typediscrete
Канонический порядокуникальный неоднозначный порядок, определённый формальной грамматикой

Синтаксис

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

Далее в примере указывается два семейтва шрифтов, первое <название-семейства>, а второе как  <общее-имя>:

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

Значения

<название-семейства>
Имя семейства шрифтов. К примеру "Times" и "Helvetica" это семейства шрифтов. Названия семейства шрифтов, которые содержат пробелы, должны быть взяты в кавычки.
<общее-имя>

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

serif
Glyphs have finishing strokes, flared or tapering ends, or have actual serifed endings.
E.g. Lucida Bright, Lucida Fax, Palatino, "Palatino Linotype", Palladio, "URW Palladio", serif.
sans-serif
Glyphs have stroke endings that are plain.
E.g. "Open Sans", "Fira Sans", "Lucida Sans", "Lucida Sans Unicode", "Trebuchet MS", "Liberation Sans", "Nimbus Sans L", sans-serif.
monospace
All glyphs have the same fixed width.
E.g. "Fira Mono", "DejaVu Sans Mono", Menlo, Consolas, "Liberation Mono", Monaco, "Lucida Console", monospace.
cursive
Glyphs in cursive fonts generally have either joining strokes or other cursive characteristics beyond those of italic typefaces. The glyphs are partially or completely connected, and the result looks more like handwritten pen or brush writing than printed letterwork.
E.g. "Brush Script MT", "Brush Script Std", "Lucida Calligraphy", "Lucida Handwriting", "Apple Chancery", cursive.
fantasy
Fantasy fonts are primarily decorative fonts that contain playful representations of characters.
E.g. Papyrus, Herculanum, Party LET, Curlz MT, Harrington, fantasy.
system-ui
Glyphs are taken from the default user interface font on a given platform. Because typographic traditions vary widely across the world, this generic is provided for typefaces that don't map cleanly into the other generics.

Валидные именна семейства шрифтов

Одно или более имеен font-family необходимо указать последовательно используя идентификаторы. Идентификатор можно указать как с кавычками, так и без. Если вы используете идентификатор без кавычек и ваше font-family имя начинается со знаки препинания или цифры то каждый знак необходимо экранировать. 

Например, следующие объявления являются валидными:

font-family: Gill Sans Extrabold, sans-serif;
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;

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

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

где
<family-name> = <string> | <custom-ident>+
<generic-family> = serif | sans-serif | cursive | fantasy | monospace

Примеры

Некоторые общие семейства шрифтов

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

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

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

.cursive {
  font-family: cursive;
}

.fantasy {
  font-family: fantasy;
}

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

Спецификация Статус Комментарий
CSS Fonts Module Level 4
Определение 'generic font families' в этой спецификации.
Рабочий черновик Добавляет новые общие семейства шрифтов, в частности: system-ui, emoji, math, and fangsong.
CSS Fonts Module Level 3
Определение 'font-family' в этой спецификации.
Кандидат в рекомендации Никаких существенных изменений
CSS Level 2 (Revision 1)
Определение 'font-family' в этой спецификации.
Рекомендация Никаких существенных изменений
CSS Level 1
Определение 'font-familiy' в этой спецификации.
Рекомендация Первоначальное определение

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

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Свойство Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Базовая поддержка 1 (Да) 1.0 (1.7 или ранее) 3.0 3.5 1.0
system-ui 56 Нет Нет [1] Нет 43 ? [2]
Свойство Android Webview Chrome for Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Базовая поддержка 1 1 (Да) 1.0 (1) 6.0 6 1.0
system-ui 56 56 Нет ? Нет 43 ? [2]

[1] system-ui  в данный момент не импламентированно, смотри баг 1226042.
[2] system-ui  импламентированно в Safari (wkbug.com/151493), возможно будет выпущено в ближайшем времени.
Префиксный алиас  -apple-system is поддерживается в Safari начиная с  MAC OS X 10.11 и iOS 9, а также в Firefox 43 на MAC OS (баг 1201318).

Метки документа и участники

 Внесли вклад в эту страницу: Gnet, chulanovskyi
 Обновлялась последний раз: Gnet,