Убедитесь, что текст остается видимым во время загрузки веб-шрифта

Published on Updated on

Translated to: English, Español, Português, 한국어

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

Причины плохих результатов проверки отображения шрифтов в Lighthouse

Lighthouse отмечает URL-адреса любых шрифтов, которые могут мигать невидимым текстом:

Скриншот проверки Lighthouse «Убедитесь, что текст остается видимым во время загрузки веб-шрифтов»

See the Lighthouse performance scoring post to learn how your page's overall performance score is calculated.

Как избежать отображения невидимого текста

Самый простой способ избежать отображения невидимого текста при загрузке пользовательских шрифтов — это временно отобразить системный шрифт. Включив font-display: swap в свой @font-face, вы можете избежать FOIT в большинстве современных браузеров:

@font-face {
font-family: 'Pacifico';
font-style: normal;
font-weight: 400;
src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2) format('woff2');
font-display: swap;
}

API font-display определяет способ отображения шрифта. swap сообщает браузеру, что текст, использующий шрифт, должен немедленно отображаться с использованием системного шрифта. Когда пользовательский шрифт готов, он заменяет системный шрифт. (Для получения дополнительной информации см. статью «Избегайте невидимого текста во время загрузки шрифта».)

Предварительно загрузите веб-шрифты

Используйте <link rel="preload" as="font">, чтобы получить файлы шрифтов раньше. Дополнительные материалы:

Шрифты Google

Добавьте параметр &display=swap в конце вашего URL-адреса Google Fonts:

<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet">

Поддержка браузера

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

Codelab

Ознакомьтесь с codelab «Избегайте мигания невидимого текста», чтобы узнать, как избежать FOIT во всех браузерах.

Рекомендации по стекам

Drupal

Укажите @font-display при определении пользовательских шрифтов в вашей теме.

Magento

Укажите @font-display при определении пользовательских шрифтов.

Ресурсы

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.