Google Fonts - это бесплатная платформа с открытым исходным кодом, которая предлагает обширную библиотеку веб-шрифтов. Для веб-разработчика подключение этих шрифтов в свои проекты необходимо для создания визуально привлекательных дизайнов на различных устройствах.
Одним из важнейших аспектов эффективного использования Google Fonts является понимание CSS свойства font-display, которое определяет, как будет отображаться шрифт вашего сайта в процессе его загрузки. Другими словами, свойство указывает браузеру как долго он должен ждать загрузку шрифта и должен ли он перед этим отображать резервный встроенный шрифт. Используя свойство font-display, вы можете оптимизировать взаимодействие с пользователем, уменьшив влияние медленной загрузки шрифта на внешний вид и производительность вашего веб-сайта.
Как добавить Google Fonts в свой проект
Существует два основных метода добавления Google Fonts в ваш проект: ссылкой и импортом. Также их можно скачать и подключить в стилях с помощью правила @font-face.
Добавление шрифтов Google ссылкой
Это наиболее распространенный способ добавления шрифтов Google в ваш проект. Для этого выполните следующие действия:
- Зайдите на сайт Google Fonts.
- Выберите шрифт, который хотите использовать.
- Кликните на шрифт, чтобы открыть страницу сведений о нем.
- Выберите нужные стили и жирность шрифта.
- Если панелька справа с выбранными опциями шрифта не появилась, нажмите иконку «Показать выбранное».
- В выехавшей панели выберете опцию <link> и вы увидите код для добавления шрифта.
Например, чтобы добавить шрифт «Roboto», тег ссылки будет выглядеть так:
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">Его необходимо будет вставить в ваш HTML.
Добавление шрифтов Google импортом
Импортировать шрифты Google можно используя правило @import в вашем файле CSS. Для этого выполните следующие действия:
- Выполните шаги 1-5 из способа выше.
- Вместо опции <link> переключитесь на опцию @import.
- Скопируйте предоставленный фрагмент кода и вставьте его в начало файла CSS.
Например, для импорта шрифта «Roboto» правило будет выглядеть так:
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');Подключение шрифтов с помощью @font-face
Посетив сайт Google Fonts и выбрав необходимый шрифт, вы можете его скачать, кликнув на соответствующей иконке в верхней панели. Далее, каждый из необходимых шрифтов можно подключить в CSS-стилях отдельно, используя правило @font-face. Например, подключить скачанный шрифт «Roboto-Regular» можно следующим образом:
@font-face {
font-family: 'Roboto';
src: url('path/to/Roboto-Regular.ttf');
font-weight: normal;
font-style: normal;
}Значения свойства font-display
Свойство font-display имеет пять возможных значений, каждое из которых имеет разное поведение при отрисовке страницы.
auto
Это значение оставляет поведение рендеринга шрифта на усмотрение браузера. Оно может привести к несогласованному отображению шрифта в разных браузерах
block
Это значение указывает браузеру сначала скрыть текст и дождаться загрузки шрифта. Если шрифт не загружается в течение короткого периода времени, браузер отобразит резервный шрифт. Как только пользовательский шрифт завершит загрузку, браузер заменит текст, чтобы использовать пользовательский шрифт. Этот метод может привести к нежелательному визуальному отображению сайта во время загрузки шрифта - резкому появлению текста.
swap
Значение указывает браузеру немедленно отображать текст с использованием резервного шрифта и переключаться на пользовательский шрифт после его загрузки. Этот метод может вызвать визуальное резкое изменение вида текста, но гарантирует, что текст будет виден пользователю с самого начала.
fallback
Значение представляет собой комбинацию block и swap. Браузер сначала скроет текст на короткое время (обычно около 100 мс). Если пользовательский шрифт загрузится в течение этого времени, браузер отобразит его. В противном случае он покажет резервный шрифт. По прошествии более длительного периода (обычно около трех секунд), если пользовательский шрифт все еще не загружен, браузер сдастся и продолжит использовать резервный шрифт.
optional
Значение аналогично fallback, но с более коротким периодом ожидания загрузки пользовательского шрифта. Если пользовательский шрифт не загрузится в течение этого короткого периода (зависит от браузера), браузер сдастся и продолжит использовать резервный шрифт. Этот метод отдает предпочтение производительности, а не отрисовке шрифта.
Реализация свойства font-display
Если шрифт добавляется ссылкой и импортом, то значение свойства font-display можно определить прямо в коде этих методов.
Для шрифта, добавленных ссылкой, значение можно изменить в параметре адреса. Например, для примера выше установим значение font-display: fallback:
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=fallback" rel="stylesheet">Для шрифта, импортируемого в CSS с помощью @import, значение устанавливается подобным образом:
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=fallback');Если шрифт подключается с помощью @font-face, к остальным стилям добавляется еще один:
@font-face {
font-family: 'Roboto';
src: url('path/to/Roboto-Regular.ttf');
font-weight: normal;
font-style: normal;
font-display: fallback;
}Распространенные проблемы и их решение
Ниже описаны самые распространенные проблемы и их решения при использовании Google Fonts и свойства font-display.
Пользовательский шрифт не загружается или не отображается
- Убедитесь, что вы правильно добавили тег <link> или правило @import в свой файл HTML или CSS.
- Проверьте наличие опечаток или неправильного URL-адреса.
- Убедитесь, что в ваших стилях CSS используется правильное имя семейства шрифтов и его толщина.
Мелькание невидимого текста или мелькание нестилизованного текста
- Выберите другое значение font-display, которое лучше соответствует вашим требованиям. Например, если вы столкнулись с резким появлением текста из невидимого, попробуйте использовать значение swap или fallback. Если вы столкнулись с резким мельканием при изменении шрифта, рассмотрите возможность применения значения block или fallback.
- Убедитесь, что ваш пользовательский шрифт загружается как можно раньше в процессе загрузки страницы.
- Оптимизируйте размер файла шрифта, выбрав только необходимые стили и толщину.
Несогласованное отображение шрифтов в разных браузерах.
- Установите одно из конкретных значений font-display вместо auto.
- Протестируйте свой веб-сайт в различных браузерах на предмет корректных стилей для шрифта.
Комментарии (0)