Генератор гибкой типографии CSS
Создавайте шкалу типов CSS clamp() (XS–4XL), которая плавно интерполирует размер шрифта между минимальной и максимальной шириной окна просмотра, с живым изменяемым предпросмотром и показанной базовой математикой интерполяции. Полностью работает в вашем браузере.
Ввод
Базовый размер шрифта при минимальной ширине окна просмотра.
Базовый размер шрифта при максимальной ширине окна просмотра.
Ниже этой ширины размер шрифта остаётся фиксированным на минимальном уровне.
Выше этой ширины размер шрифта остаётся фиксированным на максимальном уровне.
Насколько каждый уровень растёт относительно предыдущего при минимальной ширине окна просмотра.
Насколько каждый уровень растёт относительно предыдущего при максимальной ширине окна просмотра.
При отключении выводит простой блок служебных классов .text-xs / .text-base / … вместо этого.
Вывод
Your type scale will appear here.
Настоящее правило clamp() в изолированном Shadow DOM — измените размер окна браузера, чтобы увидеть масштабирование в реальном времени.
| Уровень | Мин. | Макс. | clamp() |
|---|---|---|---|
| No data yet | |||
Демонстрационная разметка, которую отображает живой предпросмотр выше — образец текста на каждом уровне, не предназначена для вставки как есть.
Питает живой предпросмотр выше — те же правила clamp() из вывода CSS, применённые к классам демонстрационной разметки.
Другие способы использовать этот инструмент
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-fluid-typography-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"minFontSize": "16",
"maxFontSize": "20",
"minViewport": "320",
"maxViewport": "1200",
"minRatio": "1.2",
"maxRatio": "1.25",
"outputUnit": "rem",
"asCustomProperties": "true"
}'Подставьте свой собственный ключ из аккаунта. Поля инструмента — это тело запроса, без обёртки.
Спросите у ИИ-агента
Use the IOTools `css-fluid-typography-generator` tool (CSS Fluid Typography Generator) on this input:
YOUR_INPUT_HEREВставьте это любому агенту, подключённому к MCP-серверу IOTools, и добавьте свой ввод.
Виджет для встраивания
<iframe
src="https://iotools.cloud/embed/css-fluid-typography-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Генератор гибкой типографии CSS — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Вставьте это на свою страницу — бесплатно, без ключа, нужна лишь обратная ссылка.
| Стоимость вызова API/MCP | От 5 кредитов |
|---|---|
| Нужно больше кредитов? | Посмотреть тарифы |
Также доступно через
Руководства
Что это делает
Фиксированные точки разрыва медиа-запросов font-size вызывают резкий скачок текста на нескольких ширинах. Гибкая типография плавно масштабирует размер шрифта при изменении размера окна просмотра, используя CSS clamp() для ограничения результата между минимальным и максимальным размером. Этот инструмент создает полную 8-уровневую шкалу типов (XS–4XL) из правил clamp() из двух размеров шрифта, двух ширин окна просмотра и коэффициента масштабирования на каждом конце — без фиксированных точек разрыва, без скачков.
Как использовать
- Установите минимальный размер шрифта и минимальную ширину окна просмотра — базовый размер шрифта, ниже которого текст перестаёт уменьшаться.
- Установите максимальный размер шрифта и максимальную ширину окна просмотра — базовый размер, выше которого текст перестаёт увеличиваться.
- Выберите коэффициент масштабирования для каждого конца (Малая терция, Большая терция, Чистая кварта, …) — насколько каждый уровень (SM → базовый → LG → XL…) растёт относительно предыдущего. Использование разных коэффициентов на каждом конце позволяет заголовкам расти быстрее, чем основной текст, по мере расширения экрана — это обычно в системах гибкой типографии.
- Выберите rem или px для вывода и хотите ли вы выводить CSS-переменные (
--font-base: clamp(...)) или простые служебные классы (.text-base { font-size: clamp(...); }). - Скопируйте вывод CSS прямо в вашу таблицу стилей.
Живой предпросмотр монтирует сгенерированные правила clamp() в изолированном Shadow DOM — измените размер окна браузера, и образец текста будет масштабироваться в реальном времени точно так же, как на вашем сайте.
Математика
Каждый clamp() уровня построен из стандартной формулы линейной интерполяции: slope = (maxSize − minSize) / (maxViewport − minViewport), затем preferred = (minSize − minViewport × slope) + slope × 100vw. Это предпочтительное значение растёт линейно с шириной окна просмотра и ограничивается clamp(minSize, preferred, maxSize), поэтому результат точно совпадает с minSize при minViewport, точно совпадает с maxSize при maxViewport и плавно интерполирует между ними. Ниже минимальной ширины или выше максимальной ширины размер остаётся зафиксированным на соответствующей границе. Таблица разбивка шкалы типов показывает вычисленные размеры мин/макс и результирующую строку clamp() для каждого уровня.
Почему не просто использовать медиа-запрос?
Медиа-запрос изменяет font-size на одной фиксированной ширине в пикселях, поэтому текст прыгает в момент пересечения точки разрыва. Гибкая типография на основе clamp() плавно масштабируется по всему диапазону между вашими двумя точками разрыва, поэтому нет заметного скачка — и нет точки разрыва для выбора для каждого устройства.
Это работает во всех браузерах?
clamp() и единицы vw поддерживаются во всех основных браузерах с 2020 года, поэтому это работает везде, кроме очень старых браузеров, которые предшествуют CSS-переменным.
Похожие инструменты
Конвертируете размер в другое направление? Используйте Конвертер пикселей, REM и EM для преобразования одного значения между единицами. Для адаптивных правил на основе точек разрыва (не гибких) см. Генератор CSS Media Query. Для интерактивного конструктора кривой замедления в том же стиле см. Генератор CSS Cubic Bezier.
Конфиденциальность
Всё работает в вашем браузере — размеры шрифтов и параметры не отправляются на сервер.