Dynamic Scaling Example

Как автоматически настроить размер шрифта с помощью CSS font-size-adjust?

От автора: многие разработчики используют несколько семейств шрифтов и размеров шрифта, чтобы лучше представить веб-страницу. Например, разработчик может использовать шрифт Bold Comic Sans для заголовков и шрифт Roboto для текста. Однако из-за этого ваш веб-сайт может выглядеть неаккуратным, поскольку многие браузеры не поддерживают все шрифты. Свойство CSS font-size-adjust поможет избежать такой ситуации, сделав размер шрифта автоматически настраиваемым.

CSS font-size-adjust принимает несколько единиц измерения, в которых отображаются размеры шрифта, включая пиксели, em, rem, ключевые слова и единицы области просмотра. Его можно применять к классам и идентификаторам CSS, но и к самим элементам. Таким образом, его можно использовать как отличный прием, чтобы предотвратить значительное уменьшение размера шрифта, если ваш первый выбранный шрифт не загружается.

Однако, прежде чем рассматривать свойство CSS font-size-adjust, давайте быстро взглянем на свойство CSS font-size.

Свойство CSS font-size указывает желаемую высоту глифов на основе шрифта. Для масштабируемого шрифта применяется коэффициент для вычисления размера шрифта. Однако для немасштабируемого шрифта абсолютная единица размера шрифта соответствует установленному размеру шрифта.

Изучите Веб-вёрстку с нуля

Если вы мечтаете создавать сайты, но не знаете, с чего начать. Хотите глубоко погрузиться в основы веб-разработки, а не просто пройтись по верхам — этот курс для вас!

absolute-number: это значение относится к вычисленным размерам шрифта.

relative-size: он принимает значение относительно вычисленного font-size и таблицы font-size.

length-percentage: указывает, что размер шрифта является абсолютным.

Свойство CSS font-size-adjust

Свойство CSS font-size-adjust предоставляет разработчикам возможность управлять размером шрифта, позволяя им изменять размер шрифта, когда изначально выбранный тип шрифта недоступен.

В таких ситуациях происходит откат шрифта, и браузер использует второй указанный шрифт. Это может привести к большой проблеме, если будет разница между соотношением сторон исходного и используемого шрифта. В таких обстоятельствах, когда нам нужно позаботиться о внешнем виде и поддерживать читабельность текста, можно использовать свойство CSS font-size-adjust.

Свойство CSS font-size-adjust указывает, что размер шрифта элемента необходимо изменить на основе высоты строчных букв, а не максимума прописных букв.

none: указывает, что высота шрифта по оси x не сохраняется.

число: это значение относится к числу аспекта первого использованного шрифта, а затем остальные доступные шрифты будут масштабированы в соответствии со следующей формулой: c = (a/a’) s

c — скорректированный размер шрифта для использования

а — значение аспекта, заданное свойством font-size-adjust

а’ — значение аспекта фактического шрифта

s — значение размера шрифта

Пример

Если Roboto 15 пикселей (со значением аспекта 0,50) был недоступен, а следующий заданный шрифт имел значение аспекта 0,40, размер используемого заменяющего шрифта был бы 15 * (0,50 / 0,40) = 18,75 пикселей.

Как работает CSS font-size-adjust?

Вот демонстрация того, как работает font-size-adjust, позволяя автоматически настраивать размер шрифта. Ниже приведен пример, в котором сравниваются два разных типа шрифтов с разным соотношением сторон. Высота по оси x строчных букв двух шрифтов может быть изменена для соответствия высоте по оси x другого шрифта.

На изображении выше к тексту слева был применен шрифт Comic Sans со значением аспекта 0,53. Напротив, текст с правой стороны был использован со шрифтом Calibri, который имеет значение аспекта 0,47. Это дает очень мелкий текст. В нижней строке был применен параметр font-size-adjust, равный 0,53, из-за чего размер шрифта на нижней стороне теперь изменен в соответствии с указанным соотношением сторон.

Значение свойства CSS font-size-adjust влияет на используемое значение font-size, но не влияет на его значение перечисления. Оно влияет на размеры относительных единиц, поддерживаемых метриками шрифтов, такими как ex и ch шрифтов, доступных в первую очередь, но не искажает масштаб единиц em.

Поскольку числовые значения line-height проверяются с вычисленным размером font-size, свойство CSS font-size-adjust не изменяет используемое значение line-height; скорее, он автоматически регулирует размер шрифта.

В CSS авторы часто указывают «высоту строки» как кратную размеру шрифта. Поскольку свойство CSS font-size-adjust влияет на используемое значение font-size, авторы должны обязательно установить высоту строки при использовании CSS font-size-adjust.

Примечание. Установка слишком высокой высоты строки может привести к наложению строк текста.

Источник

Динамическое масштабирование элементов в CSS

Перед началом статьи хочу сказать, что еще больше полезной и нужной информации вы найдете в нашем Telegram-канале. Подпишитесь, мне будет очень приятно.

Сегодня я поделюсь с вами одним трюком, с которым я столкнулся, работая с CSS. С его помощью можно динамически масштабировать любой HTML-элемент, а заодно устранить многие причины, по которым раньше приходилось писать медиа-запросы.

Прежде всего, я хотел бы отдать должное Майку Ритмюллеру за то, что он изначально придумал эту функцию, и Джеффу Грэму из CSS-Tricks за расширение её функциональности. Я ни в коем случае не ставлю себе в заслугу создание этой функции. Я только хочу пропеть ей хвалу.

Итак, давайте приступим к применению стилей.

В CSS по умолчанию присутствует возможность применять базовые математические операции с помощью функции calc(). Благодаря ей мы можем решить любое простое математическое уравнение и установить полученный результат в качестве свойства CSS, которому требуется численное значение. calc() может применяться везде: от font-size до width и box-shadow… .

В CSS также есть средство измерения, которое вычисляет viewport height и viewport width окна браузера:vh и vw соответственно. 100vh обозначает всю высоту окна браузера, а 100vw — всю ширину. Разница между 100% и 100vh/100vw в том, что 100% устанавливается относительно селектора, внутри которого происходит определение, в то время как значение 100vh/100vw — абсолютное для окна браузера. Это различие важно.

Объяснив этот момент с calc() и 100vh/100vw, пропущу несколько шагов и перейду прямо к формуле.

Она позволяет динамически масштабировать любое свойство с числовым значением, основанным на ширине или высоте браузера:

calc([min size]px + ([max size] — [min size]) * ((100vw — [min vw width]px) / ([max vw width] — [min vw width])))

Хорошо… Давайте разбираться.

Во-первых, взглянем на правую часть уравнения:

Нам нужно установить минимальный размер для элемента element, так, чтобы любой element, который мы хотим масштабировать, не был равен 0px. Если мы хотим, чтобы элемент был размером не менее 25px, то можем подставить это значение в первую часть calc():

([max size] — [min size]) * ((100vw — [min vw width]px) / ([max vw width] — [min vw width])))

Здесь мы устанавливаем диапазон через минимальный и максимальный размер, который хочется видеть у элемента, и эта разность будет действовать как множитель. Если нужно, чтобы размер элемента находился в пределах между 25px и 50px, мы можем подставить сюда такие значения:

([max size] — [min size]) = (50 — 25)

Третья часть сложнее всего:

((100vw — [min vw width]px) / ([max vw width] — [min vw width]))

Здесь мы можем задать диапазон через минимальное и максимальное ожидаемое разрешение браузера. На десктопе я всегда, исходя из опыта, беру 1920px (горизонтальное разрешение для 1080p) и 500px (самое маленькое разрешение, до которого возможно масштабировать в Chrome без инструментов разработчика).

Подставим эти значения, и крайняя слева часть уравнения примет следующий вид:

((100vw — [min vw width]px) / ([max vw width] — [min vw width])) = ((100vw — 500px) / (1920–500)))

Это создаёт соотношение, основанное на величине значения свойства viewport (окна просмотра) браузера. Всё, что выходит за пределы диапазона между 500px и 1920px, будет масштабироваться вверх или вниз, но с линейной скоростью. Мы также можем написать медиа-запрос для мобильных устройств или сверхшироких мониторов или записать эти исключения в саму функцию calc().

Давайте начнём упрощать: подставим в функцию некоторые числа и посмотрим на неё в действии. Мы можем заменить 100vw любым разрешением, чтобы увидеть соотношение, которое устанавливаем для размера нашего element:

((1920px — 500px) / (1920–500)) = 1 ((1565px — 500px) / (1920–500)) = 0.75 ((1210px — 500px) / (1920–500)) = 0.5 ((855px — 500px) / (1920–500)) = 0.25 ((500px — 500px) / (1920–500)) = 0

Если затем взять множитель размера элемента, заданный ранее, и умножить на это соотношение, то в итоге получится динамическое значение размера нашего элемента, основанное на размере viewport:

(50–25) * ((1920px — 500px) / (1920–500)) = 25px (50–25) * ((1565px — 500px) / (1920–500)) = 18.75px (50–25) * ((1210px — 500px) / (1920–500)) = 12.5px (50–25) * ((855px — 500px) / (1920–500)) = 6.25px (50–25) * ((500px — 500px) / (1920–500)) = 0px

Наконец, если мы затем добавим минимальный размер элемента к этому множителю, то получим окончательный размер элемента:

25 + (50–25) * ((1920px — 500px) / (1920–500)) = 50px 25 + (50–25) * ((1565px — 500px) / (1920–500)) = 43.75px 25 + (50–25) * ((1210px — 500px) / (1920–500)) = 37.5px 25 + (50–25) * ((855px — 500px) / (1920–500)) = 31.25px 25 + (50–25) * ((500px — 500px) / (1920–500)) = 25px

Итак, если мы хотим, чтобы элемент был равен 25px, когда ширина браузера равна 500px, и 50px, когда ширина браузера равна 1920px, вся функция будет выглядеть следующим образом:

calc(25px + (50–25) * ((100vw — 500px) / (1920–500)))

calc([min size]px + ([max size] — [min size]) * ((100vw — [min vw width]px) / ([max vw width] — [min vw width])))

Теперь перейдём к примерам.

У меня есть очень простая настройка “скелета” HTML с импортом CSS-файла:

Here Be Headline

Давайте для начала поиграем с шириной width у square и small_square с помощью нашей новой причудливой функции масштабирования.

Допустим, нам нужно, чтобы ширина square была равна максимум 1500px и минимум 250px.

Также настроим small_square на ширину максимум 1000px и минимум 100px.

Источник