Свойство CSS font-size-adjust сегодня появилось в Chrome и стало частью недавно доступного базового продукта. Это свойство может помочь предотвратить смещение макета при загрузке резервных шрифтов и обеспечить читаемость резервных шрифтов при шрифтах меньшего размера. Свойство font-size-adjust является частью Interop 2024 , так что это еще одна победа в усилиях по улучшению совместимости веб-платформы.
Проблема
При сравнении двух шрифтов одинакового размера в зависимости от формы и размера глифов отображаемый текст может занимать разное количество места. В качестве примера в следующей демонстрации показан текст в Verdana и Arial, оба имеют размер 16 пикселей.
Разница в размере объясняется тем, что значение аспекта (высота строчных букв по сравнению с прописными буквами шрифта) различается в зависимости от шрифта.
Это может вызвать две проблемы, если в качестве резервного варианта используется шрифт с другим значением формата. Во-первых, изменится объем места, занимаемого шрифтом. Во-вторых, выбранный вами запасной шрифт может быть менее разборчивым, чем тот, который был указан изначально, особенно при небольших размерах шрифта. Это связано с тем, что относительная высота строчных и прописных букв является ключевым фактором разборчивости.
Как помогает 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 читателям, использующим резервный шрифт, улучшить работу сайта, особенно теперь, когда он доступен повсюду!