Генератор стека резервных шрифтов
Создавайте готовые к использованию стеки семейств шрифтов CSS с соответствующими кросс-платформенными запасными вариантами. Выбирайте из более чем 90 тщательно подобранных шрифтов Google в 5 категориях: без засечек, с засечками, моноширинные, дисплейные и рукописные. Каждая категория включает в себя несколько тщательно подобранных резервных вариантов стека, охватывающих системные шрифты macOS, Windows, Linux, iOS и Android. Просмотрите свой стек в реальном времени, скопируйте декларацию CSS, фрагмент @import или любой вариант стека — и все это одним щелчком мыши. Полностью бесплатно, регистрация не требуется.
Select a primary font and a fallback category to generate your CSS font-family stack.
Or switch to "Quick Presets" for ready-to-use recommendations.
О резервных стеках шрифтов
- Стек семейства шрифтов — это список шрифтов в CSS, разделенных запятыми. Браузер пробует каждый шрифт по порядку: если основной шрифт не установлен или не загружается, он возвращается к следующему. Хорошо продуманный стек гарантирует, что текст всегда будет читаем, даже если ваш собственный веб-шрифт недоступен.
- Этот инструмент объединяет выбранный вами основной шрифт (шрифт Google или любое другое имя шрифта) с тщательно подобранными системными списками резервных вариантов, организованными по категориям. Каждая категория — Sans Serif, Serif, Monospace, Display и Handwriting — имеет несколько вариантов стека: от базового (Arial, Helvetica, без засечек) до комплексного (системные шрифты Apple, Segoe UI, Roboto и т. д.).
- Даже при использовании font-display: swap существует короткий момент, когда резервный шрифт отображается до загрузки пользовательского шрифта. Хороший резервный стек с аналогичными метриками (высота по оси X, ширина, вес) уменьшает совокупный сдвиг макета (CLS) и обеспечивает более плавное чтение. Это критически важно для основных веб-показателей.
- Всегда сопоставляйте резервную категорию с основным шрифтом. В качестве основного шрифта с засечками следует использовать системные шрифты с засечками, а не без засечек. Несовпадающие категории вызывают резкие визуальные изменения при отрисовке резервного варианта. Этот инструмент автоматически выбирает категорию основного шрифта в качестве резервной категории по умолчанию.
Часто задаваемые вопросы
Стек семейства шрифтов — это приоритетный список шрифтов в вашем CSS. Браузер пытается использовать первый шрифт; если он недоступен или не загружается, он пробует следующий. Это гарантирует, что текст всегда будет отображаться читаемым шрифтом независимо от того, что установил пользователь.
Этот инструмент генерирует комплексные кроссплатформенные стеки, охватывающие macOS, Windows, Linux, iOS, Android и ChromeOS. Написание их вручную чревато ошибками — вы можете забыть шрифты, специфичные для платформы, или использовать неверные кавычки. Инструмент гарантирует, что каждый стек является правильным и полным.
Каждая категория имеет несколько вариантов. Стек 1 (рекомендуется) является наиболее полным — он охватывает все основные операционные системы с собственными системными шрифтами. Стек 2 короче для поддержки старых браузеров. Стек 3 — это минимальный запасной вариант для веб-безопасности. Рекомендуемый стек лучше всего подходит для большинства проектов.
Имена шрифтов, содержащие пробелы (например, «Times New Roman»), должны быть заключены в одинарные или двойные кавычки. Общие ключевые слова (с засечками, без засечек, моноширинный шрифт, курсив) и системные шрифты, начинающиеся с тире (например, -apple-system), НЕ должны заключаться в кавычки. Инструмент корректно обрабатывает цитирование.
Да. Используйте селектор шрифтов, чтобы выбрать один из более чем 90 шрифтов Google, или введите любое имя собственного шрифта в поле поиска. Инструмент генерирует стек для любого введенного вами имени шрифта.
Хорошо подобранный резервный стек снижает совокупный сдвиг макета (CLS). Если резервный шрифт имеет такие же показатели, как и ваш собственный шрифт, текст не смещается при загрузке пользовательского шрифта. В сочетании с font-display: swap это обеспечивает наилучший баланс производительности и визуальной согласованности.
Да. Добавьте стек в файл Tailwind.config.js в разделе theme.extend.fontFamily. Например: fontFamily: {heading: ['Playfair Display', 'Georgia', 'serif'] }. Затем используйте в своей разметке шрифт-заголовок служебного класса.
Да, почтовые клиенты поддерживают очень мало шрифтов. Большинство из них отображают только веб-безопасные шрифты, такие как Arial, Georgia, Times New Roman, Courier и Verdana. Наши базовые резервные стеки Sans Serif и Serif хорошо подходят для шаблонов электронной почты.