Предотвращайте смещение макета и появление невидимого текста (FOIT) путем предварительной загрузки дополнительных шрифтов

Начиная с Chrome 83, link rel="preload" и font-display: Optional можно объединить, чтобы полностью устранить проблемы с макетом.

Хуссейн Джирдех
Houssein Djirdeh
X GitHub Homepage

Оптимизируя циклы рендеринга, Chrome 83 устраняет смещение макета при предварительной загрузке дополнительных шрифтов. Сочетание <link rel="preload"> с font-display: optional — наиболее эффективный способ гарантировать отсутствие сбоев макета при рендеринге пользовательских шрифтов.

Совместимость с браузерами

Ознакомьтесь с данными MDN для получения актуальной информации о поддержке кроссбраузерности:

Рендеринг шрифта

Сдвиг макета или переразметка происходит, когда ресурс на веб-странице динамически изменяется, что приводит к «смещению» контента. Извлечение и отображение веб-шрифтов может напрямую вызывать сдвиги макета одним из двух способов:

  • Резервный шрифт заменяется новым шрифтом («вспышка нестилизованного текста»)
  • «Невидимый» текст отображается до тех пор, пока на странице не будет отображен новый шрифт («вспышка невидимого текста»).

Свойство CSS font-display предоставляет способ изменения поведения рендеринга пользовательских шрифтов с помощью ряда различных поддерживаемых значений ( auto , block , swap , fallback и optional ). Выбор используемого значения зависит от предпочтительного поведения для асинхронно загружаемых шрифтов. Однако каждое из этих поддерживаемых значений может инициировать перекомпоновку одним из двух способов, перечисленных выше, до настоящего момента!

Дополнительные шрифты

Свойство font-display использует временную шкалу из трех периодов для обработки шрифтов, которые необходимо загрузить перед их отображением:

  • Блокировать: отображать «невидимый» текст, но переключаться на веб-шрифт сразу после его загрузки.
  • Замена: отображать текст с использованием резервного системного шрифта, но переключаться на веб-шрифт сразу после завершения его загрузки.
  • Ошибка: текст отображается с использованием резервного системного шрифта.

Ранее шрифты, обозначенные как font-display: optional имели период блокировки 100 мс и не имели периода подкачки. Это означает, что «невидимый» текст отображается очень недолго, прежде чем переключиться на резервный шрифт. Если шрифт не загружен в течение 100 мс, то используется резервный шрифт, и подкачка не происходит.

Диаграмма, показывающая предыдущее поведение необязательного шрифта, когда шрифт не загружается
Предыдущая font-display: optional поведение в Chrome при загрузке шрифта после периода блокировки в 100 мс

Однако в случае, если шрифт загружен до завершения периода блокировки в 100 мс, пользовательский шрифт отображается и используется на странице.

Диаграмма, показывающая предыдущее необязательное поведение шрифта при его загрузке вовремя
Предыдущая font-display: optional поведение в Chrome при загрузке шрифта до истечения периода блокировки в 100 мс

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

Оптимизации появились в Chrome 83, чтобы полностью удалить первый цикл рендеринга для дополнительных шрифтов, которые предварительно загружаются с помощью <link rel="preload'> . Вместо этого рендеринг блокируется до тех пор, пока не завершится загрузка пользовательского шрифта или не пройдет определенный период времени. Этот период ожидания в настоящее время установлен на 100 мс, но, возможно, изменится в ближайшем будущем для оптимизации производительности.

Диаграмма, показывающая поведение нового предварительно загруженного дополнительного шрифта, когда шрифт не загружается
Новый font-display: optional поведение в Chrome, когда шрифты предварительно загружены и шрифт загружается после периода блокировки в 100 мс (без мерцания невидимого текста)
Диаграмма, показывающая поведение нового предварительно загруженного необязательного шрифта при своевременной загрузке шрифта
Новый font-display: optional поведение в Chrome, когда шрифты предварительно загружены и загружены до периода блокировки в 100 мс (без мерцания невидимого текста)

Предварительная загрузка дополнительных шрифтов в Chrome устраняет возможность зависания макета и мерцания нестилизованного текста. Это соответствует требуемому поведению, как указано в модуле CSS Fonts Module Level 4, где дополнительные шрифты никогда не должны вызывать переразметку, а пользовательские агенты могут вместо этого задерживать рендеринг на подходящий период времени.

Хотя предварительная загрузка необязательного шрифта не является обязательной, она значительно повышает вероятность его загрузки до первого цикла рендеринга, особенно если он еще не сохранен в кэше браузера.

Заключение

Команда Chrome заинтересована в вашем опыте предварительной загрузки дополнительных шрифтов с этими новыми оптимизациями! Сообщите о проблеме , если у вас возникли какие-либо проблемы или вы хотите оставить какие-либо предложения по функциям.