Начиная с Chrome 83, ссылки rel="preload" и font-display: option можно комбинировать, чтобы полностью удалить некорректный макет.
Оптимизируя циклы рендеринга, 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 уровня 4 , где дополнительные шрифты никогда не должны вызывать переразметку, а пользовательские агенты вместо этого могут задерживать рендеринг на подходящий период времени.
Хотя нет необходимости предварительно загружать дополнительный шрифт, это значительно повышает вероятность его загрузки до первого цикла рендеринга, особенно если он еще не сохранен в кеше браузера.
Заключение
Команде Chrome интересно узнать о вашем опыте предварительной загрузки дополнительных шрифтов с учетом этих новых оптимизаций! Сообщите о проблеме, если у вас возникли какие-либо проблемы или вы хотите отказаться от каких-либо предложений по функциям.
,Начиная с Chrome 83, ссылки rel="preload" и font-display: option можно комбинировать, чтобы полностью удалить некорректный макет.
Оптимизируя циклы рендеринга, 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 уровня 4 , где дополнительные шрифты никогда не должны вызывать переразметку, а пользовательские агенты вместо этого могут задерживать рендеринг на подходящий период времени.
Хотя нет необходимости предварительно загружать дополнительный шрифт, это значительно повышает вероятность его загрузки до первого цикла рендеринга, особенно если он еще не сохранен в кеше браузера.
Заключение
Команде Chrome интересно узнать о вашем опыте предварительной загрузки дополнительных шрифтов с учетом этих новых оптимизаций! Сообщите о проблеме, если у вас возникли какие-либо проблемы или вы хотите отказаться от каких-либо предложений по функциям.