Как автоматически настроить размер шрифта

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

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

Разработчики часто используют множество семейств шрифтов и размеров шрифтов на одной веб-странице в целях поддержания красоты и удобства чтения. Разработчик может, например, использовать шрифт Open Sans для заголовков и шрифт Roboto Mono для основного текста.

Когда к шрифту невозможно получить доступ, браузер возвращается ко второму предоставленному шрифту, что может привести к значительному изменению размера шрифта и, в свою очередь, к изменению других частей нашего пользовательского интерфейса. Чтобы лучше представить это в том виде, в каком оно будет выглядеть при реализации, взгляните на приведенную ниже иллюстрацию.

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

font-size-adjust — во второй строке регулирует размер букв во втором шрифте в соответствии с высотой букв первого шрифта.

Данный CSS атрибута полезен, поскольку он определяет удобочитаемость шрифта на основе размера строчных букв, а не размера заглавных букв, и настраивает размер строчных букв в соответствии с размером используемых в данный момент шрифтов.

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

Совместимость с браузерами

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

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

Думаю вы знаете, что свойство font-size CSS задает общий размер шрифта. Есть несколько ключевых моментов, на которые следует обратить внимание в отношении свойства font-size:

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

Вот пример синтаксиса font-size:

/ absolute-size /
font-size: medium | xx-small | x-small | small | large | x-large | xx-large; 

/ relative-size /
font-size: smaller | larger;

/ percentage /
font-size: 10%;

/ length /
font-size: 5px;

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

Как мы упоминали ранее, размер шрифта элемента должен регулироваться на основе высоты строчных букв, а не высоты прописных букв.

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

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

Синтаксис font-size-adjust выглядит следующим образом:

number | none | initial | inherit;

Number - Свойство font-size-adjust имеет числовое значение
None - дефолтное значение
Initial - Устанавливает значение этого свойства равным значению по умолчанию
Inherit - Свойство font-size-adjust передается от родителя к потомку

Давайте рассмотрим пример. Предположим, что свойство font-size-adjust принимает значение 0,5, которое вернет размер шрифта, равный половине заданного размера шрифта для строчных букв.

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

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

Итоги

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

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

Не забывайте подписываться на телеграм канал, чтобы не пропустить новые статьи, до встречи ✌️

Читайте еще:

#css #frontend

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