Статические маркетинговые страницы по-прежнему теряют баллы Cumulative Layout Shift, когда дисплейный веб-шрифт заменяет системный стек: заголовок героя смещается на 4–12 px, строки цен «прыгают», Lighthouse красит CLS, хотя картинки идеальны. В 2026 году внутри @font-face можно задать size-adjust, а также ascent-override, descent-override и line-gap-override, чтобы движок до декодирования финального файла строил строки так, будто марка уже на месте. Материал для команд на MPA и статических генераторах, которым нужна воспроизводимая ветка Safari/WebKit, а не только Chromium CI. Читайте вместе с адаптивными изображениями и LCP и заголовками с balance и pretty, чтобы закрыть бюджеты изображений, типографики и CLS одновременно.
Вы получите рецепт измерений, шаблон с @supports, матрицу для font-display, пороги (полевой P75 CLS > 0,1 — сигнал тревоги, сканирование size-adjust в диапазоне 90–110 %) и напоминание об облачном Mac mini MacHTML с публичной ценой около 16,9 долларов в сутки для проверки настоящего Safari.
Почему веб-шрифты портят CLS
Системный fallback и брендовый контур редко совпадают по таблицам ascender, descender и межстрочного зазора. После font-display: swap браузер пересчитывает все строковые блоки героя, навигации и прайса. Если критический CSS встроен, а WOFF2 приезжает с CDN на 120–400 ms позже, подмена часто случается после начала прокрутки — полевой CLS хуже лабораторного Lighthouse.
font-display: block прячет текст и бьёт по FCP; отрицательные margin не масштабируются. Переопределения метрик решают геометрию стандартно и держатся до 200 % масштаба при аккуратной настройке.
Что меняют метрические переопределения
Они не трогают векторы глифов, а меняют используемые метрики шрифта для высоты строк и вертикального ритма. Ошибочный процент расползается по flex-стекам с иконочными шрифтами и локализованными строками.
Перед правками CSS зафиксируйте в DevTools три числа: высота прописных у fallback, у веб-шрифта и разница line-height: normal. Один раз записать в репозиторий дизайн-токенов — и все локали переиспользуют базу.
size-adjust и ручные override
size-adjust равномерно масштабирует метрики — обычно достаточно, если веб-шрифт выше системного всего на 2–6 %. Если обрезаются нижние выносные в польском или чешском, опустите descent-override, оставив size-adjust около 96 %. Одна ось за коммит, визуальные диффы в истории.
Оборачивайте блок в @supports (size-adjust: 90%), чтобы старые движки не инвалидировали всё правило @font-face. Сочетается с preload WOFF2.
Сочетание с font-display
Для оферт и документации — font-display: optional, CLS почти ноль. Для героя с фирменной формой — swap плюс переопределения; на киноленте WebPageTest убедитесь, что swap укладывается в 40 ms до скролла. Длинные абзацы с block на мобильном Safari часто читаются после того, как пользователь уже прокрутил.
Доступность: после каждой подстройки — короткий прогон VoiceOver, границы строк могут звучать иначе. Для многоязычных стопок с цифрами заложите 20 минут.
Финальные проценты вшивайте в пайплайн, который выдаёт одинаковые @font-face для превью и продакшена.
Особенности Safari / WebKit
WebKit применяет override уже на первой доступной фазе шрифта, иногда до окончания удалённого декодирования — плюс для CLS, минус в виде лёгкого дрейфа каретки в contenteditable. Разделяйте тесты, если маркетинговый шрифт соседствует с CMS. Сtable Safari и Safari Technology Preview могут расходиться на минор при крупных обновлениях гарнитур — гоняйте оба.
У вариативных шрифтов с высоким дефолтным opsz сначала опустите size-adjust, затем крутите оси.
Готовый фрагмент @font-face
@supports (size-adjust: 90%) {
@font-face {
font-family: "Brand Display";
src: url("/fonts/brand-display.woff2") format("woff2");
font-weight: 100 900;
font-display: swap;
size-adjust: 96%;
ascent-override: 92%;
descent-override: 24%;
line-gap-override: 0%;
}
}Один вес WOFF2 держите ниже 80 КБ; на Apple Silicon декодирование часто около 30 ms, на старых Intel Air до 55 ms — фиксируйте в дашбордах.
Матрица решений
| Сценарий | font-display | Переопределения | Причина |
|---|---|---|---|
| Маркетинговый герой | swap | size-adjust + ascent/descent | бренд важнее, CLS ограничить |
| Документация | optional | лёгкий size-adjust | стабильность |
| Моноширинный код | swap | к системному mono | убрать горизонтальный джиттер pre |
| CJK-локали | swap | отдельные измерения | не копировать латинские значения |
Лабораторный и полевой CLS
Lighthouse показывает эффект сразу; CrUX отстаёт до 28 дней. Собирайте web-vitals на клиенте, сегментируйте UA Safari, ставьте алерт при P75 > 0,1. Сэмплируйте session replay для длинного хвоста URL без калибровки.
При ограниченном бюджете начинайте со страниц, где текст героя даёт > 35 % суммарного CLS.
Вопросы и ответы
Вариативные шрифты?
Да: сначала оси по умолчанию, затем size-adjust, затем точечная подстройка осей.
Префетчить все начертания?
Только те, что в первом экране; лишний preload отнимает канал у LCP-картинки (до 80 ms на 4G).
Чужой CDN с CSS?
Безопасно переопределить сложно — хостите WOFF2 сами и владеете таблицей стилей целиком.
Облачный Apple Silicon Mac mini даёт тот же стек Safari/Core Text, что и ноутбуки руководства, в отличие от приближений Linux headless. Узлы MacHTML поддерживают SSH для автоматических скриншотов и сценариев WebPageTest и VNC для покадрового разбора. В простое часто около 12 Вт — аренда mini на две недели шрифтового спринта дешевле многих откатов в проде.
Аренда вместо покупки: публичная ставка около 16,9 $/день, остановка после кампании; таблицы метрик остаются в Git без 36-месячной амортизации железа.
Проверка CLS-дружественных шрифтов в настоящем Safari
Арендуйте облачный Mac mini и проверьте переопределения и момент font-display до слияния статического CSS.