Как избежать скрытия текста во время загрузки шрифта
Суть проблемы #
Часто шрифты — это большие файлы, на загрузку которых требуется время. Поэтому некоторые браузеры скрывают текст, пока шрифт не загрузится (что вызывает так называемое «внезапное появление текста»). Если вы стремитесь повысить эффективность работы сайта, этого внезапного появления текста следует избегать — лучше сразу показывать содержимое страницы с использованием системного шрифта (что приведет к «кратковременному показу текста без стилей»).
Мгновенный показ текста #
В этом руководстве описаны два способа мгновенного показа текста. Первый — очень простой, но поддерживается не всеми браузерами. Второй — более сложный, но зато поддерживается всеми браузерами. Выбирайте тот, который вы реализуете и будете поддерживать.
Вариант № 1: использовать «font-display» #
API font-display
позволяет указать стратегию отображения шрифтов. Ключевое слово swap
сообщает браузеру, что текст, использующий этот шрифт, должен выводиться сразу — системным шрифтом. Как только нестандартный шрифт будет загружен, он заменит системный.
Если браузер не поддерживает font-display
, он следует поведению по умолчанию для загрузки шрифтов. Посмотреть, какие браузеры поддерживают font-display
, можно здесь.
Поведение по умолчанию при загрузке шрифтов для популярных браузеров:
Вариант № 2: не использовать нестандартные шрифты, пока они не загрузятся #
Приложив немного больше усилий, можно реализовать единообразное поведение во всех браузерах.
Реализацию этого подхода можно разделить на три этапа:
- Не использовать нестандартный шрифт при начальной загрузке страницы. В этом случае браузер сразу выводит текст системным шрифтом.
- Определить завершение загрузки нестандартного шрифта. Это можно сделать парой строк кода на JavaScript — благодаря библиотеке FontFaceObserver.
- Обновить стиль страницы с использованием нестандартного шрифта.
Чтобы реализовать такое поведение, понадобится кое-что подправить:
- Изменить CSS-код так, чтобы при начальной загрузке страницы нестандартный шрифт не использовался.
- Добавить на страницу скрипт, который определяет завершение загрузки нестандартного шрифта, а затем обновляет стиль страницы.
Проверка #
Запустите Lighthouse, чтобы проверить, использует ли сайт font-display: swap
для отображения текста:
- Откройте DevTools, нажав
Control+Shift+J
(илиCommand+Option+J
, если у вас Mac). - Click the Lighthouse tab.
- Make sure the Performance checkbox is selected in the Categories list.
- Click the Generate report button.
Сайт должен проходить аудит Показ текста во время загрузки веб-шрифтов (Ensure text remains visible during webfont load).