Чай
Web Performance

Как убрать прыгание кастомных шрифтов при загрузке

Использование пользовательских веб-шрифтов является одной из наиболее распространенных причин CLS.

Это происходит потому, что параметры вашего шрифта отличаются от показателей системного шрифта, и именно системный шрифт используется браузером для вычисления размеров блоков во время загрузки пользовательского шрифта.

Таким образом, один и тот же текст с одинаковыми свойствами размера шрифта и высоты строки может занимать разное количество места.

Настроив системный шрифт через ascent-overridedescent-overrideline-gap-overridesize-adjust мы можем решить эту проблему.

image.pngimage.png

Утилита fontpie https://github.com/pixel-point/fontpie

Плагин для postcss https://github.com/TomerAberbach/postcss-fontpie

Комментарии
Пока нету комментариев...