CSS Font-size-Adjust теперь находится в базовой версии

Опубликовано: 23 июля 2024 г.

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

Проблема

При сравнении двух шрифтов одинакового размера в зависимости от формы и размера глифов отображаемый текст может занимать разное количество места. В качестве примера в следующей демонстрации показан текст в Verdana и Arial, оба имеют размер 16 пикселей.

Текст отображается с разрешением 16 пикселей в Verdana и Arial.

Разница в размере объясняется тем, что значение аспекта (высота строчных букв по сравнению с прописными буквами шрифта) различается в зависимости от шрифта.

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

Как помогает font-size-adjust

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

Использование font-size-adjust .

В этом примере используется одно значение — число, которое настраивает шрифты с использованием метрики шрифта по умолчанию — ex-height . Это отношение высоты x (высоты строчной буквы x в шрифте) к размеру шрифта. Вы также можете указать используемую метрику шрифта. В следующем примере я нормализовал шрифты, используя ключевое слово ch-width в дополнение к числу.

Использование font-size-adjust с метрикой шрифта ch-width.

Чтобы просмотреть все возможные значения, см. документацию MDN для font-size-adjust .

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