CSS-свойство font-family
CSS-свойство font-family задаёт список шрифтов для элемента. Узнайте, как работает стек шрифтов, и посмотрите примеры.
CSS-свойство font-family определяет, какой шрифт используется для отображения текста. Вы задаёте приоритетный список шрифтов, и браузер перебирает его слева направо, используя первый шрифт, найденный на устройстве пользователя.
На этой странице рассматривается принцип работы стека шрифтов, разница между конкретными и общими семействами, как составить надёжный список запасных шрифтов, а также особенности экранирования кавычками и посимвольного подбора.
Как работает стек шрифтов
Значения разделяются запятыми, и браузер воспринимает их как альтернативы, а не как единый шрифт. Используется первый доступный шрифт из списка, после чего перебор останавливается:
font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;Здесь браузер сначала пробует "Segoe UI". Если этот шрифт не установлен, он пробует Roboto, затем Helvetica, затем Arial и наконец общее семейство sans-serif, которое браузер всегда разрешает одним из встроенных шрифтов. Именно поэтому стек шрифтов должен всегда заканчиваться общим семейством — это гарантирует, что текст отобразится во что-нибудь разумное даже на устройстве, где нет ни одного из предпочитаемых вами шрифтов.
Два вида имён шрифтов
Существует два типа значений, и хороший стек сочетает оба:
family-name— название конкретного шрифта, например"Times New Roman",CourierилиArial. Их указывают первыми, поскольку именно эти шрифты вы хотите использовать.generic-family— ключевое слово-категория, которое браузер сопоставляет с подходящим встроенным шрифтом. Одно из этих значений указывается последним в качестве окончательного запасного варианта. Стандартные общие семейства:
| Общее семейство | Типичный вид | Примеры шрифтов |
|---|---|---|
serif | Буквы с засечками | Times New Roman, Georgia |
sans-serif | Чистые, без засечек — часто для интерфейсов и основного текста | Arial, Helvetica |
monospace | Каждый символ одинаковой ширины — для кода | Courier New, Consolas |
cursive | Рукописный / курсивный стиль | Brush Script, Comic Sans |
fantasy | Декоративный стиль для заголовков | Impact, Papyrus |
system-ui | Системный шрифт интерфейса устройства | San Francisco, Segoe UI |
Кавычки в именах шрифтов
Если имя шрифта содержит пробелы (или может быть принято за ключевое слово), заключите его в кавычки:
/* Multi-word names need quotes */
font-family: "Courier New", "Lucida Console", monospace;
/* Single-word names don't, but quotes are still valid */
font-family: Georgia, serif;Никогда не заключайте в кавычки ключевое слово общего семейства — "sans-serif" будет воспринято как шрифт с буквальным именем "sans-serif", а не как категория общего семейства.
Посимвольный запасной шрифт
Выбор шрифта не останавливается на первом доступном шрифте для всего текста — он происходит посимвольно. Если у выбранного шрифта нет глифа для конкретного символа (например, эмодзи или нелатинской буквы), браузер продолжает перебирать список в поисках шрифта, который содержит этот глиф. Именно поэтому широкое общее семейство в конце списка помогает при работе с многоязычным или насыщенным символами контентом.
Чтобы загрузить и использовать пользовательский шрифт, не установленный на устройстве пользователя, определите его с помощью правила @font-face и затем укажите его имя в font-family.
| Начальное значение | serif |
|---|---|
| Применяется к | Всем элементам. Также применяется к ::first-letter и ::first-line. |
| Наследуется | Да. |
| Анимируемое | Нет. |
| Версия | CSS1 |
| DOM-синтаксис | object.style.fontFamily = "Verdana, sans-serif"; |
Синтаксис
Синтаксис CSS-свойства font-family
font-family: family-name | generic-family | initial | inherit;Пример свойства font-family:
Пример CSS-свойства font-family со значением sans-serif
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
</style>
</head>
<body>
<h2>Font-family property example</h2>
<p>We used "Lucida Grande" font-family for this text.</p>
</body>
</html>Стек выше запрашивает "Lucida Sans Unicode", затем откатывается к "Lucida Grande" (аналог для macOS) и наконец к тому, что браузер использует для sans-serif, — так абзац остаётся читабельным везде.
Составление надёжного стека шрифтов
Практичный стек перечисляет по порядку: идеальный шрифт, одну-две широко распространённые альтернативы со схожим видом и общее семейство в конце. Популярный стек «системных шрифтов», использующий нативный шрифт интерфейса каждой платформы, выглядит так:
body {
font-family: -apple-system, system-ui, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
}На устройствах Apple это San Francisco, на Windows — Segoe UI, на Android — Roboto — без необходимости загружать веб-шрифт.
Значения
| Значение | Описание | Попробуйте |
|---|---|---|
| family-name, generic-family | Приоритетный список имён семейств шрифтов и/или общих семейств. | Попробуйте » |
| initial | Устанавливает значение свойства по умолчанию. | Попробуйте » |
| inherit | Наследует значение свойства от родительского элемента. | Попробуйте » |
Связанные свойства
font-family обычно задаётся вместе с другими свойствами шрифта или сразу через сокращённое свойство font:
- font-size — размер текста.
- font-weight — жирность текста.
- font-style — курсив или обычный стиль.
- @font-face — загрузка пользовательского веб-шрифта для использования здесь.