Предотвратить CLS при использовании переменного шрифта с установками в виде шрифтов ⇐ Html

[Anonymous]

Я использую переменную шрифт в своем проекте, как это: < /p>

Код: Выделить всё

css @font-face {
font-family: 'MyVariableFont';
src: url('/fonts/my-variable-font.woff2') format('woff2-variations');
}
< /code>
Когда я применяю конкретные настройки вариации, такие как: < /p>
css .my-text { font-family: 'MyVariableFont', fallback-font;
font-variation-settings: 'wght' 300, 'wdth' 30;
}

… Шрифтный шрифт, уже не точно соответствующий окончательному появлению, который вызывает значительный совокупный сдвиг макета (CLS) , как только переменная нагрузка шрифта-особенно потому, что я использую разные установки в виде шрифта для каждого слова в разделе «Фонт»). Как: < /p>

Код: Выделить всё

.regular {
font-family: 'MyVariableFont', FallbackFontRegular;
}
.condensed {
font-family: 'MyVariableFont', FallbackFontCondensed;
}
< /code>
… Но, поскольку я могу лишь настроить запасную сторону, используя font-size-adjust < /code>, он больше не соответствует правильному или ширине, и в итоге он выглядит еще хуже. Оси шрифта, такие как 'wdth' 

или 'wght' .
Перипрь переменной - черный, запасной - красный

Подробнее здесь: https://stackoverflow.com/questions/795 ... n-settings