Зажим для шрифта Fluid Typography
Создать линейную шкалу шрифта CSS между двумя ширинами области просмотра.
Исходные значения
Выражение ограничения CSS
Сгенерированное CSS является начальным значением. При необходимости отдавайте предпочтение относительным единицам измерения текста и проверяйте масштабирование, изменение размера текста и переполнение.
Сравнение сценариев
До трех снимков на этой вкладке. Загрузка одного из них заменяет текущие входные данные.
Формула
Используйте m = 100(f₁−f₀)/(v₁−v₀) и b = f₀−mv₀/100. Гибкий размер — clamp(f₀, b + m×vw, f₁); f обозначает размер шрифта, а v — ширину области просмотра.
Создать линейную шкалу шрифта CSS между двумя ширинами области просмотра.
Пример решения
- Минимальный размер шрифта (px)
- 16
- Максимальный размер шрифта (px)
- 24
- Минимальная ширина области просмотра (px)
- 400
- Максимальная ширина области просмотра (px)
- 1200
- Выражение ограничения CSS
- clamp(16px, calc(12px + 1vw), 24px)
- Коэффициент области просмотра
- 1 vw
- Перехват пикселя
- 12 px
Область применения и ограничения
Сгенерированное CSS является начальным значением. При необходимости отдавайте предпочтение относительным единицам измерения текста и проверяйте масштабирование, изменение размера текста и переполнение.
Входные данные проверяются на наличие пропущенных значений и допустимых диапазонов. Результат, выходящий за пределы конечного числового диапазона, не отображается. Округление влияет на отображение, в то время как при вычислении используется числовая точность модели.
Перед тем, как полагаться на результат, проверьте единицы измерения и предположения. Изменение метки не приводит к преобразованию валюты или физической единицы.
Версия формулы.: c81b657b101d · Пример проверен.: