dr.Brain

doctor Brain

мир глазами веб-разработчика

Как насчет max-font-size?

в CSS нет свойства max-font-size, есть ли что-нибудь взамен?

dr.Brain

время чтения 2 мин.

Photo by Dustin Haney on Unsplash

В 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.


Спасибо за внимание.

Новые публикации

Далее

Категории

О нас

Frontend & Backend. Статьи, обзоры, заметки, код, уроки.