Как насчет max-font-size?
в CSS нет свойства max-font-size, есть ли что-нибудь взамен?
В CSS нет свойства max-font-size, и, если мы хотим сделать что-нибудь, соответствующее названию этого свойства, придется проявить смекалку.
Но для начала: зачем, вообще, нам может это понадобиться? Ведь значение для font-size
может быть установлено в относительных величинах, например, font-size: 10vw
позволяет установить размер шрифта в процентах относительно общей ширины области просмотра браузера (10vw = 10%). Шрифт будет увеличиваться или уменьшаться пропорционально изменению размеров окна браузера. И, если бы в нашем распоряжении было свойство max-font-size
, мы смогли бы ограничивать максимальный размер шрифта (так же, как при наличии min-font-size
мы смогли бы ограничивать минимальный размер шрифта).
Что взамен?
Одно из решений - это использование медиа-запроса с точкой останова, устанавливающей максимальный размер шрифта в абсолютных единицах измерения:
body {
font-size: 3vw;
}
@media screen and (min-width: 1600px) {
body {
font-size: 30px;
}
}
Такой подход получил развитие в концепции CSS блокировки (CSS locks), реализующей медленное масштабирование при переходе от минимального размера к максимальному.
Например:
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;
}
}
C помощью CSS-функции max пример, продемонстрированный выше, можно реализвать в одну строку:
font-size: max(30vw, 30px);
Не менее элегантной будет реализация для совместного использования функций min и max
font-size: min(max(16px, 4vw), 22px);
Пример, приведенный выше, будет идентичен:
font-size: clamp(16px, 4vw, 22px);
Следует отметить, что в настоящее время использование перечисленных CSS-функций, включая clamp ограничено, но в Chrome такие трюки точно будут работать. Тем не менее, проверяйте возможность использования любых CSS-функций в различных браузерах, чтобы избежать возможных неприятных ситуаций.
Ну а теперь ложка дегтя: зная о существовании возможности управления максимальными и минимальными значениями размеров шрифтов с помощью CSS-функций, вряд ли можно надеяться на появление таких свойств, как max-font-size
и min-font-size
.
Спасибо за внимание.