Генератор стека шрифтов CSS — системные шрифты и запасные CJK

Что делает инструмент

Генератор стека шрифтов CSS собирает готовое к вставке значение font-family из шрифтов, которые уже установлены на устройствах ваших посетителей. Выберите стиль — например, системный шрифт интерфейса, неогротеск вроде Inter и Helvetica, переходную антикву вроде Charter или удобный для кода моноширинный шрифт, — и инструмент перечислит лучший шрифт для каждой платформы в правильном порядке.

Стеки основаны на известной коллекции Modern Font Stacks, плюс классический стек -apple-system, BlinkMacSystemFont, "Segoe UI", который до сих пор используют многие сайты. Можно добавить запасные шрифты для упрощённого и традиционного китайского, японского, корейского, арабского, тайского или хинди, а в конце — цветные шрифты эмодзи.

Как пользоваться

Выберите Стек шрифтов. Предпросмотр слева показывает, как он выглядит на устройстве, которым вы сейчас пользуетесь; текст можно изменить, чтобы проверить свои слова.
Выберите Шрифты для других письменностей, если на ваших страницах есть текст на китайском, японском, корейском, арабском, тайском или хинди.
Включите или выключите Добавить шрифты эмодзи.
Выберите Формат вывода: обычное объявление font-family, пользовательское свойство CSS, запись fontFamily для Tailwind или простой список.
Скопируйте результат или скачайте его как файл .css.

Имена, содержащие пробелы или начинающиеся с цифры, автоматически берутся в кавычки; ключевые слова CSS, такие как system-ui и sans-serif, никогда не заключаются в кавычки, потому что тогда они превратились бы в несуществующие имена шрифтов.

Пример

Системный UI с запасными шрифтами для упрощённого китайского:

font-family: system-ui, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

Советы

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

Частые вопросы

› Что такое стек шрифтов?

Это список семейств шрифтов в CSS-свойстве font-family. Браузер берёт первый шрифт, установленный на устройстве, а если его нет — следующий, и в конце списка стоит общее семейство, например sans-serif.

› Зачем добавлять китайские, японские или корейские шрифты?

В западных шрифтах вроде Inter или Charter нет глифов CJK. Если указать PingFang SC, Microsoft YaHei или Noto Sans SC перед общим семейством, китайский текст будет набран шрифтом подходящего стиля, а не тем, что выберет система. То же относится к арабскому, тайскому и хинди (деванагари). Русскому, украинскому, греческому, вьетнамскому, турецкому, польскому и другим языкам на латинице или кириллице ничего добавлять не нужно: системные шрифты и шрифты Noto в каждом стеке уже их поддерживают.

› Почему шрифты эмодзи стоят после sans-serif?

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

› Нужно ли загружать веб-шрифты для этих стеков?

Нет. Каждый стек использует шрифты, которые поставляются с Windows, macOS, iOS, Android или распространёнными дистрибутивами Linux, поэтому страницы загружаются без единого запроса шрифтов.