Как избежать скрытия текста во время загрузки шрифта

Available in: Español, 日本語, 한국어, Português, 中文, English
Appears in: Ускорение загрузки
Katie Hempenius
Katie Hempenius
TwitterGitHubGlitchHomepage
Содержание

Суть проблемы #

Часто шрифты — это большие файлы, на загрузку которых требуется время. Поэтому некоторые браузеры скрывают текст, пока шрифт не загрузится (что вызывает так называемое «внезапное появление текста»). Если вы стремитесь повысить эффективность работы сайта, этого внезапного появления текста следует избегать — лучше сразу показывать содержимое страницы с использованием системного шрифта (что приведет к «кратковременному показу текста без стилей»).

Мгновенный показ текста #

В этом руководстве описаны два способа мгновенного показа текста. Первый — очень простой, но поддерживается не всеми браузерами. Второй — более сложный, но зато поддерживается всеми браузерами. Выбирайте тот, который вы реализуете и будете поддерживать.

Вариант № 1: использовать «font-display» #

БылоСтало
@font-face { font-family: Helvetica; } @font-face { font-family: Helvetica; <strong>font-display: swap;</strong> }

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

Если браузер не поддерживает font-display, он следует поведению по умолчанию для загрузки шрифтов. Посмотреть, какие браузеры поддерживают font-display, можно здесь.

Поведение по умолчанию при загрузке шрифтов для популярных браузеров:

БраузерПоведение по умолчанию, если шрифт не готов…
EdgeПока нужный шрифт не готов, используется системный шрифт. Затем шрифт заменяется.
ChromeСкрывает текст максимум на три секунды. Если по истечении этого времени шрифт не готов, используется системный шрифт, пока нужный шрифт не загрузится. Затем шрифт заменяется.
FirefoxСкрывает текст максимум на три секунды. Если по истечении этого времени шрифт не готов, используется системный шрифт, пока нужный шрифт не загрузится. Затем шрифт заменяется.
SafariСкрывает текст, пока шрифт не будет готов.

Вариант № 2: не использовать нестандартные шрифты, пока они не загрузятся #

Приложив немного больше усилий, можно реализовать единообразное поведение во всех браузерах.

Реализацию этого подхода можно разделить на три этапа:

  • Не использовать нестандартный шрифт при начальной загрузке страницы. В этом случае браузер сразу выводит текст системным шрифтом.
  • Определить завершение загрузки нестандартного шрифта. Это можно сделать парой строк кода на JavaScript — благодаря библиотеке FontFaceObserver.
  • Обновить стиль страницы с использованием нестандартного шрифта.

Чтобы реализовать такое поведение, понадобится кое-что подправить:

  • Изменить CSS-код так, чтобы при начальной загрузке страницы нестандартный шрифт не использовался.
  • Добавить на страницу скрипт, который определяет завершение загрузки нестандартного шрифта, а затем обновляет стиль страницы.

Проверка #

Запустите Lighthouse, чтобы проверить, использует ли сайт font-display: swap для отображения текста:

  1. Откройте DevTools, нажав Control+Shift+J (или Command+Option+J, если у вас Mac).
  2. Click the Lighthouse tab.
  3. Make sure the Performance checkbox is selected in the Categories list.
  4. Click the Generate report button.

Сайт должен проходить аудит Показ текста во время загрузки веб-шрифтов (Ensure text remains visible during webfont load).

Производительность
Последнее обновление: — Улучшить статью
Return to all articles
Поделиться