Какие шрифты доступны в инструменте?

Доступен кураторский список из 22 популярных шрифтов Google Fonts, включая Inter, Montserrat, Playfair Display, JetBrains Mono и другие.

Как генерируется CSS-код?

Инструмент создает директиву @import для подключения выбранных шрифтов с конкретными весами, а также объявляет CSS-переменные для заголовков и текста.

Можно ли использовать свои примеры текста для проверки?

Да, вы можете ввести произвольный текст в поля «Пример текста заголовка» и «Пример текста» для точной оценки визуального стиля.

Что происходит, если выбранный вес недоступен для шрифта?

Выбранный вес автоматически округляется до ближайшего поддерживаемого начертания в семействе Google Fonts.

Содержит ли CSS-код лишние стили?

Нет, генерируется только один @import с выбранными весами и базовые правила для тегов h1-h3, body и p.

Elysia Tools

Навигация

Design

Лаборатория Подбора Веб-Шрифтов

Предпросмотр пары Google Fonts (заголовок + текст) с настройкой веса и межстрочного, плюс готовый CSS-сниппет с @import и переменными. Кураторский список из 22 шрифтов и 7 проверенных пресетов.

Детали

С чем помогает этот инструмент

Предпросмотр пары заголовок + текст из Google Fonts бок о бок, настройка веса и межстрочного, и копирование готового CSS-сниппета.

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

Выберите шрифт заголовка и шрифт текста из кураторского реестра из 22 гарнитур.
Задайте вес заголовка и вес текста; каждый шрифт прикрепляется к ближайшему доступному весу.
Настройте размер текста (px) и межстрочный; предпросмотр обновляется.
При желании задайте свои тексты примера заголовка и примера текста.
Скопируйте CSS — содержит один @import, загружающий только два выбранных веса, плюс CSS-переменные и правила для h1, h2, h3 и body, p.

Кураторские пары — боковая панель предлагает 7 проверенных сочетаний (редакционное, SaaS, новости, техно, ручная работа, афиша, дев-тул).

Запуск

Запустить этот инструмент

Заполните форму, запустите инструмент и посмотрите результат на этой же странице.

Подготовленные примеры запуска

Нажмите пример, чтобы автоматически заполнить форму. Файлы по-прежнему нужно загрузить.

2 примеров

Редакционное: Playfair × Inter

Заголовок дидон высокого контраста над нейтральным гротеском.

<div class="wp-wrap">Playfair Display × Inter — @import with wght@700 and wght@400, CSS variables --font-heading / --font-body.</div>

SaaS: Montserrat × Merriweather

Геометрический заголовок с антриквой для экрана.

<div class="wp-wrap">Montserrat × Merriweather — modern agency / startup vibe.</div>

Ввод

Заполните нужные поля и запустите инструмент.

8 параметров

СодержимоеВставьте или введите основные значения.2

Пример текста заголовкаtextНеобязательноOptional custom heading text. Defaults to a neutral sample.Пример текстаtextareaНеобязательноOptional custom body paragraph(s). Defaults to a neutral sample.

НастройкиНастройте форматы, диапазоны, числа и режимы.6

Шрифт заголовкаselectНеобязательноThe display / heading typeface.Вес заголовкаnumberНеобязательноSnaps to the nearest available weight for the chosen font.Шрифт текстаselectНеобязательноThe body / paragraph typeface.Вес текстаnumberНеобязательноSnaps to the nearest available weight for the chosen font.Размер текста (px)numberНеобязательноBody paragraph font-size in pixels.Межстрочный интервалnumberНеобязательноUnitless line-height for body text. 1.4–1.7 is the readable range.

Результат

Готово к запуску

После запуска здесь появятся файлы, текст, структурированные данные или потоковый вывод.

Примеры

Примеры для этого инструмента

Связано

Лаборатория Подбора Веб-Шрифтов

С чем помогает этот инструмент

Запустить этот инструмент

Подготовленные примеры запуска

Ввод

Результат

Примеры для этого инструмента

Продолжить с похожими инструментами и темами

Подготовленные примеры запуска

Ввод

Результат

Узнайте, когда использовать этот инструмент, что он поддерживает и как его применяют пользователи.

Ключевые факты

Обзор

Когда использовать

Как это работает

Сценарии использования

Примеры

1. Подбор шрифтов для литературного блога

2. Шрифтовая пара для технологического стартапа

FAQ

Примеры Обработки Изображений Web Python

Примеры Обработки Изображений Web Rust

Примеры Обработки Изображений Web TypeScript

Примеры Файловых Операций Web Go

Экстрактор токенов темы ECharts

Калькулятор clamp для fluid typography CSS

Делитель тредов Twitter / X

Извлечение палитры по URL изображения

Инструменты извлечения текста

Инструменты конвертации регистра, кодировки и нормализации текста

Инструменты Text

Инструменты анализа текста, читаемости и проверки содержания