Skip to content
О сайте Блог Обучение Исследовать узоры Case studies
Содержание
  • Суть проблемы
  • Мгновенный показ текста
  • Вариант № 1: использовать «font-display»
  • Вариант № 2: не использовать нестандартные шрифты, пока они не загрузятся
  • Проверка

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

Nov 5, 2018
Available in: English, Español, Português, 中文, 日本語 и 한국어
Appears in: Ускорение загрузки
Katie Hempenius
Katie Hempenius
TwitterGitHubGlitchHomepage
Содержание
  • Суть проблемы
  • Мгновенный показ текста
  • Вариант № 1: использовать «font-display»
  • Вариант № 2: не использовать нестандартные шрифты, пока они не загрузятся
  • Проверка

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

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

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

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

Вариант № 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-код так, чтобы при начальной загрузке страницы нестандартный шрифт не использовался.
  • Добавить на страницу скрипт, который определяет завершение загрузки нестандартного шрифта, а затем обновляет стиль страницы.

Попробуйте

Использование Font Face Observer для мгновенного показа текста.

Проверка #

Запустите 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).

Производительность
Последнее обновление: Nov 5, 2018 — Улучшить статью
Codelabs

See it in action

Learn more and put this guide into action.

  • Avoid flash of invisible text
Return to all articles
Поделиться
подписаться

Contribute

  • Сообщить об ошибке
  • Просмотреть исходный код

Дополнительная информация

  • developer.chrome.com
  • Новости Chrome
  • Разборы конкретных случаев
  • Подкасты
  • Шоу

Соцсети

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • Все продукты
  • Условия и конфиденциальность
  • Правила сообщества

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.