Начало распродаж · Скидка на доставку · Поступление новой коллекции

BELAYA KASKA / FEATURE

designАвтор: Пуск‑Медиа (импорт)Просмотры: 3

font-display: swap и борьба с невидимым текстом (FOIT)

Когда swap уместен, когда optional, и как не получить CLS от смены метрик шрифта.

Изображение статьи: font-display: swap и борьба с невидимым текстом (FOIT)

font-display: swap показывает fallback сразу и меняет на webfont после загрузки — текст читаем раньше, но возможен сдвиг строк (FOUT/CLS).

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

- [Best practices for fonts — web.dev](https://web.dev/articles/font-best-practices) — font-display, subsetting, preload.

- [@font-face — MDN (font-display)](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display) — Значения swap, optional, block.

---

## size-adjust

Подбор fallback с близкими метриками или size-adjust уменьшает скачок при swap.

Preload только 1–2 начертания, реально используемых above-the-fold.

#шрифты#CLS#типографика

Мы используем обязательные cookie для работы сайта (корзина, вход, оформление заказа) и необязательные — для аналитики и маркетинга. Вы можете принять все, отклонить необязательные или настроить категории. Подробнее в политике cookies.