От автора: гибкая типографика — это идея, что font-size (и, возможно, другие атрибуты шрифта, например line-height) меняются в зависимости от размера экрана (или, возможно, запросов контейнера, если они у нас были).
Основная хитрость заключается в единицах на основе окна просмотра. Вы можете буквально задать шрифт в единицах на основе окна просмотра (например font-size: 4vw), но колебания в размерах настолько велики, что это обычно нежелательно. Это имитируется, с помощью чего-то вроде font-size: calc(16px + 1vw). Но в то время как нам все равно нравятся вычисления, самая распространенная реализация оказалась уравнением для вычисления простого английского текста:
Я хочу, чтобы шрифт был от 16px на экране 320px и 22px на экране 1000px. Что дало это:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
html { font-size: 16px; } @media screen and (min-width: 320px) { html { font-size: calc(16px + 6 * ((100vw - 320px) / 680)); } } @media screen and (min-width: 1000px) { html { font-size: 22px; } } |
Это, по сути, установка минимального и максимального размера шрифта, чтобы шрифт не уменьшался и не увеличивался до слишком экстремальных размеров. «CSS-блокировки» — это термин, придуманный Тимом Брауном.
Минимум и максимум ты говоришь?! Ну, так получилось, что функции для них попали в спецификацию CSS в виде min() и max().
Таким образом, мы можем упростить вышеприведенную настройку с помощью одной строки и сохранить блокировки:
|
1 2 3 |
html { font-size: min(max(16px, 4vw), 22px); } |
На самом деле мы могли бы остановиться на этом. Но вы, вероятно, захотите задать объявление font-size таким образом, чтобы установить приемлемое резервное значение без каких-либо необычных функций.
Но пока мы расширяем границы, есть еще одна функция, которая еще больше упрощает все — clamp()! Она принимает три значения: min, max и гибкие единицы (или расчет или что-то еще), которые будут использовать в случае, если значение находится между минимумом и максимумом. Итак, наша одна строка становится еще меньше:
|
1 2 3 |
body { font-size: clamp(16px, 4vw, 22px); } |
Это будет реализовано в Chrome 79+ (который не был поставлен в стабильной версии, но скоро появится). Дядя Дэйв очень рад, что FitText теперь занимает несколько байтов вместо all-of-jQuery плюс еще 40 строк. Вот, как Дэйв проверяет пользовательские свойства CSS:
Автор: Chris Coyier
Источник: //css-tricks.com
Редакция: Команда webformyself.
