От автора: в CSS нет max-font-size, поэтому, если нам нужно что-то, что делает то же самое, мы должны прибегнуть к хитрости.
Зачем это вообще нужно? Ну, сам font-size может быть установлен динамически. Например, font-size: 10vw;. Это использует «единицы окна просмотра» для определения размера шрифта, который будет увеличиваться и уменьшаться в зависимости от размера окна браузера. Если бы мы имели max-font-size, мы могли бы ограничить, насколько большим становится шрифт (аналогично другому направлению с помощью min-font-size).
Одним из решений является использование медиа-запроса с определенной контрольной точкой размера экрана, которая устанавливает размер шрифта в не относительных единицах.
|
1 2 3 4 5 6 7 8 |
body { font-size: 3vw; } @media screen and (min-width: 1600px) { body { font-size: 30px; } } |
Существует концепция, получившая название CSS-блокировки, которая становится все более интересной, согласно ей мы медленно масштабируем значение между минимумом и максимумом. Это может быть так…
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
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(), поэтому приведенный выше пример становится однострочным:
|
1 |
font-size: max(30vw, 30px); |
Или добавьте минимальное значение:
|
1 |
font-size: min(max(16px, 4vw), 22px); |
Что идентично:
|
1 |
font-size: clamp(16px, 4vw, 22px); |
На момент написания статьи совместимость с браузерами довольно невысока, но в настоящее время в Chrome это работает. Ожидается, что данная функция будет реализована в остальных браузерах, но, если вам она нужна прямо сейчас, посмотрите на первый вариант выше.
Теперь, когда у нас есть эти функции, мне кажется маловероятным, что мы когда-либо получим в CSS min-font-size и max-font-size, так как эти они почти аналогичны.
Автор: Chris Coyier
Источник: //css-tricks.com
Редакция: Команда webformyself.
