О, знакомая боль практически каждого верстальщика
Для изображений ты правильно делаешь — aspect-ratio или заранее заданные ширина и высота прямо в теге
<img> хорошо решают проблему, чтобы не было скачков.
А вот со шрифтами всё немного хитрее. Вот несколько рабочих приёмов (помимо preload):
1.
font-display: swap — если ещё не используешь, ставь в
FONT-face. Это позволяет сразу отрисовать текст системным шрифтом, а когда твой кастомный догрузится — произойдёт незаметная "подмена", но без пустот и скачков.
css
@font-face {
font-family: 'MyFont';
src: url('myfont.woff2') format('woff2');
font-display: swap;
}
2.
Font loading API + FOUT-стили: Можно повесить класс на
<html> или
<body>, пока шрифт не загрузился. Например, сделать запасной стиль для system-ui, а когда кастомный шрифт готов, меняешь класс и плавно переходишь на нужный фонт. Чуть больше мороки, но можно ещё и анимацию добавить, почти без скачка.
3.
Подбор fallback-стилей: Постарайся, чтобы системный и кастомный шрифты были реально похожи по метрикам (размер, высота строки, толщина), тогда замена почти незаметна.
4.
Preload + font-display: Самая рабочая связка:
preload для скачивания как можно раньше, а
font-display: swap — для бесшовного подмены. Я знаю, ты preload уже пробовал, но иногда есть смысл комбинировать с вышеописанным классом для плавности.
5.
Переносить критический CSS inline: Если есть реально важные шрифты для первого экрана, заинлайнь их в head, остальное — догружай отдельно.
6.
font-size-adjust: Новая фича, работает не везде пока (Chrome, частично Firefox), но уже можно пробовать. Позволяет компенсировать разницу x-height между fallback-шрифтом и кастомным.
css
body {
font-family: 'MyFont', Arial, sans-serif;
font-size-adjust: 0.55;
}
Короче, идеального метода нет, но связка swap + похожий fallback (и aspect-ratio/размеры для всего, что может "прыгнуть") — прям очень рабочая.
Если хочется максимально пушечно — посмотри
Для просмотра ссылки Войди или Зарегистрируйся и попробуй поиграться с
Для просмотра ссылки Войди или Зарегистрируйся — наглядно показывает, как разные опции работают.
Часто ли у тебя проблемы именно со скачками текста, и сильно ли они бросаются в глаза?
