Свойство font-family: стек шрифтов
Как подобрать основной и резервные шрифты без обязательной загрузки внешних файлов.
Как это работает
font-family задаёт упорядоченный список шрифтов. Браузер ищет доступный вариант, а при отсутствии нужного символа может использовать запасной. Общая группа sans-serif или monospace в конце списка делает поведение устойчивее.
Для быстрого справочника часто достаточно системного стека. Он не требует отдельного сетевого запроса и привычно выглядит на устройстве. Если подключаете собственный шрифт, проверьте кириллицу, лицензию, размер файла и поведение во время загрузки.
Пример в интерфейсе
body { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
code { font-family: Consolas, "Courier New", monospace; }Значения и поведение
| Значение или правило | Результат |
|---|---|
| system-ui | Системный интерфейсный шрифт платформы. |
| sans-serif | Запасная группа без засечек. |
| monospace | Шрифт с одинаковой шириной знаков. |
| "Имя шрифта" | Кавычки удобны для названий с пробелами. |
На что обратить внимание
Не проверяйте гарнитуру только на латинском слове. Без кириллицы русский текст может внезапно перейти на другой шрифт.
Проверьте на практике
Примените monospace к коду и system-ui к обычному тексту. Сравните русский текст, числа и знаки пунктуации.
Связанные темы: font-size, line-height.
Попробуйте сами
РЕЗУЛЬТАТ · ИЗОЛИРОВАННЫЙ ПРЕДПРОСМОТР
Измените код и нажмите «Запустить». JavaScript и внешние запросы отключены.
Самостоятельный учебный материал. Техническая документация: первоисточник по теме ↗. Если результат отличается, проверьте код и версию браузера.