Генератор стеку шрифтів 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, тож сторінки завантажуються без жодного запиту шрифтів.