От автора: в CSS нет max-font-size, поэтому, если нам нужно что-то, что делает то же самое, мы должны прибегнуть к хитрости.
Зачем это вообще нужно? Ну, сам font-size может быть установлен динамически. Например, font-size: 10vw;. Это использует «единицы окна просмотра» для определения размера шрифта, который будет увеличиваться и уменьшаться в зависимости от размера окна браузера. Если бы мы имели max-font-size, мы могли бы ограничить, насколько большим становится шрифт (аналогично другому направлению с помощью min-font-size).
Одним из решений является использование медиа-запроса с определенной контрольной точкой размера экрана, которая устанавливает размер шрифта в не относительных единицах.
body { font-size: 3vw;
}
@media screen and (min-width: 1600px) { body { font-size: 30px; }
}Существует концепция, получившая название CSS-блокировки, которая становится все более интересной, согласно ей мы медленно масштабируем значение между минимумом и максимумом. Это может быть так…
body { font-size: 16px;
}
@media screen and (min-width: 320px) { body { font-size: calc(16px + 6 * ((100vw - 320px) / 680)); }
}
@media screen and (min-width: 1000px) { body { font-size: 22px; }
}В CSS есть функция max(), поэтому приведенный выше пример становится однострочным:
font-size: max(30vw, 30px);
Или добавьте минимальное значение:
font-size: min(max(16px, 4vw), 22px);
Что идентично:
font-size: clamp(16px, 4vw, 22px);
На момент написания статьи совместимость с браузерами довольно невысока, но в настоящее время в Chrome это работает. Ожидается, что данная функция будет реализована в остальных браузерах, но, если вам она нужна прямо сейчас, посмотрите на первый вариант выше.
Теперь, когда у нас есть эти функции, мне кажется маловероятным, что мы когда-либо получим в CSS min-font-size и max-font-size, так как эти они почти аналогичны.
Автор: Chris Coyier
Источник: https://css-tricks.com
Редакция: Команда webformyself.