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

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.

Valid family names

Font family names must either be given quoted as strings, or unquoted as a sequence of one or more identifiers. This means that punctuation characters and digits at the start of each token must be escaped in unquoted font family names.

For example, the following declarations are valid:

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

The following declarations are invalid:

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;

Formal syntax

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

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

Examples

Some common font families

.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;
}

Specifications

Specification Status Comment
CSS Fonts Module Level 4
Определение 'generic font families' в этой спецификации.
Редакторский черновик Adds new generic font families, specifically: system-ui, emoji, math, and fangsong.
CSS Fonts Module Level 3
Определение 'font-family' в этой спецификации.
Кандидат в рекомендации No significant change
CSS Level 2 (Revision 1)
Определение 'font-family' в этой спецификации.
Рекомендация No significant change
CSS Level 1
Определение 'font-familiy' в этой спецификации.
Рекомендация Initial definition

Browser compatibility

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1 (Да) 1.0 (1.7 или ранее) 3.0 3.5 1.0
system-ui 56 Нет Нет [1] Нет 43 ? [2]
Feature Android Webview Chrome for Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 1 1 (Да) 1.0 (1) 6.0 6 1.0
system-ui 56 56 Нет ? Нет 43 ? [2]

[1] system-ui is not yet implemented, see баг 1226042.
[2] system-ui is implemented in Safari (wkbug.com/151493), may ship soon.
The prefixed alias -apple-system is supported by Safari since MAC OS X 10.11 and iOS 9 and since Firefox 43 on MAC OS (баг 1201318).

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

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