fontstay.devРуководство
Коротко о том, что делает сгенерированный CSS и почему текст не прыгает, когда загружается ваш веб-шрифт.
Почему шрифты сдвигают вёрстку
Пока веб-шрифт загружается, браузер рисует текст запасным шрифтом. Когда шрифт приходит, текст перерисовывается: если глифы шире или строки выше, строки переносятся иначе и всё ниже сдвигается. Google измеряет это как Cumulative Layout Shift (CLS): 0,1 и меньше — хорошо, больше 0,25 — плохо. Если метрики запасного шрифта совпадают с метриками веб-шрифта, строки остаются на месте.
Дескрипторы @font-face, которые мы генерируем
Каждый запасной шрифт — системный шрифт через local(), объявленный с дескрипторами, которые его масштабируют: size-adjust подгоняет ширину текста, а ascent-override, descent-override и line-gap-override задают вертикальные метрики, чтобы строки имели ту же высоту. В font-family сначала идёт веб-шрифт, затем подогнанные запасные, затем общее семейство.
@font-face {
font-family: "Inter Fallback Arial";
src: local("Arial");
size-adjust: 107.12%;
ascent-override: 90.44%;
descent-override: 22.52%;
line-gap-override: 0%;
unicode-range: U+20-7E, U+A0-FF;
}
body {
font-family: "Inter", "Inter Fallback Arial", sans-serif;
}| Дескриптор | Chrome | Edge | Firefox | Safari |
|---|---|---|---|---|
size-adjust | 92 | 92 | 92 | 17 |
ascent-override | 87 | 87 | 89 | — |
descent-override | 87 | 87 | 89 | — |
line-gap-override | 87 | 87 | 89 | — |
font-size-adjust | 127 | 127 | 3 | 16.4 |
unicode-range | 1 | 12 | 36 | 3.1 |
— значит «не поддерживается», ? — «неизвестно». Браузеры без дескриптора просто игнорируют его, поэтому CSS безопасен везде.
Safari и вертикальные переопределения
Safari поддерживает size-adjust (с 17), но не ascent-override, descent-override и line-gap-override. Для таких браузеров генератор добавляет font-size-adjust, подгоняющий x-height веб-шрифта, и фиксированный line-height, который делает высоту строки независимой от метрик запасного шрифта.
unicode-range
Начертание с unicode-range используется только для перечисленных кодовых точек. Ограничение подогнанных запасных шрифтов символами, которые есть в веб-шрифте, не даёт подгонке применяться к глифам, которые веб-шрифт никогда не нарисует. Диапазоны сжимаются без потерь (соседние кодовые точки объединяются) и сопоставляются с наборами символов Google Fonts.
Форматы шрифтов
Для веба используйте WOFF2: он самый компактный и поддерживается всеми современными браузерами. WOFF, TrueType (TTF) и OpenType (OTF) тоже работают с @font-face. Коллекции шрифтов (TTC, OTC) браузер напрямую использовать не может, поэтому этот инструмент разбирает их на отдельные шрифты.
Лицензии шрифтов
Файл шрифта — это программа, и лицензия решает, можно ли разместить его на сайте. Сгенерированный CSS ссылается только на шрифты, уже установленные у посетителя (local()), но веб-шрифт, который вы отдаёте, должен быть лицензирован для этого:
- SIL Open Font License (OFL): свободно использовать и встраивать, продавать шрифт отдельно нельзя.
- Apache License 2.0: свободно использовать и встраивать с сохранением уведомления о лицензии.
- Ubuntu Font Licence (UFL): свободно использовать и встраивать, изменённые версии нужно переименовывать.
- Коммерческие и настольные лицензии часто не покрывают встраивание в веб: ищите отдельную веб-лицензию.
Текст и адрес лицензии лежат в таблице имён шрифта (name ID 13 и 14), а разрешения на встраивание — в таблице OS/2 (fsType). Лицензию всегда стоит читать и на сайте источника шрифта.