При загрузке веб-шрифтов они часто заменяют резервный шрифт, который имеет другие размеры, даже если для обоих задано одно и то же значение font-size. Это приводит к сдвигу макета (Cumulative Layout Shift) и может сделать текст нечитаемым, если строчные буквы резервного шрифта (высота строчных знаков) значительно отличаются от предпочитаемого шрифта.
Свойство font-size-adjust решает эту проблему, нормализуя размер шрифта на основе определенного показателя (обычно высоты строчных букв), гарантируя, что текст занимает одно и то же визуальное пространство независимо от того, какой шрифт активен в данный момент.
Реализация
1. Определите соотношение сторон предпочитаемого шрифта
Чтобы нормализовать резервные шрифты, вам нужно знать значение пропорции (соотношение строчных букв и размера шрифта) основного шрифта.
- Автоматическое определение (рекомендуется). Используйте ключевое слово
from-font, чтобы браузер мог извлечь соотношение из основного веб-шрифта. - Рассчитать вручную. Если вы знаете точное значение (например, 0,545 для Verdana), укажите его.
2. Примените свойство font-size-adjust к контейнеру текста
Примените свойство к элементу или родительскому контейнеру. Это гарантирует, что если основной шрифт не загрузится или будет загружаться, резервный шрифт будет масштабирован в соответствии с визуальным размером основного шрифта.
.text-content {
/* Define your font stack as usual */
font-family: "MyWebFont", "Arial", sans-serif;
font-size: 1rem;
/* MANDATORY: Normalize the font size based on the primary font's x-height.
This ensures that if 'Arial' is used as a fallback, it is scaled
to match the x-height of 'MyWebFont'. */
font-size-adjust: from-font;
}
3. Как настроить определенные показатели (необязательно)
Хотя высота строчных букв используется по умолчанию и чаще всего, вы можете нормализовать по другим показателям, таким как cap-height (полезно для заголовков, написанных заглавными буквами) или ch-width (полезно для моноширинных шрифтов).
h1 {
/* Normalize based on the height of capital letters */
font-size-adjust: cap-height from-font;
}
4. Проверьте визуальную стабильность
Убедитесь, что значение font-size-adjust правильно выравнивает резервное объявление. Чтобы проверить это, временно заблокируйте веб-шрифт или измените объявление font-family в инструментах разработчика в браузере и убедитесь, что макет текста остается стабильным.
Резервные стратегии
В браузерах, которые не поддерживают font-size-adjust, шрифт будет отображаться в масштабе по умолчанию. Это может привести к сдвигам макета или изменению читаемости при замене шрифтов.
Чтобы решить эту проблему без font-size-adjust, вы можете использовать дескрипторы @font-face size-adjust, ascent-override и descent-override для ручной настройки резервных шрифтов, хотя их сложнее рассчитать, чем одно значение font-size-adjust.