Что такое `font-display` в `@font-face`?

Question

Accepted Answer

## Зачем нужно

`font-display` описывает стратегию показа текста, пока веб-шрифт **ещё грузится**:

- `auto` — решение UA;
- `block` — короткий «невидимый» текст, затем swap;
- `swap` — сразу fallback, потом замена на веб-шрифт (риск CLS/FOUT);
- `fallback` — короткий block, затем ограниченный swap;
- `optional` — шрифт может не примениться, если не успел (меньше мерцания).

```css
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter.woff2") format("woff2");
  font-display: swap;
}
```

Для UI часто `swap` или `optional`; для иконочных шрифтов иногда `block`. Выбор — компромисс между скоростью первого текста и стабильностью метрик.