Как определить пользовательские шрифты в CSS с помощью @font-face и font-display

Введение

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

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

Предпосылки

Редактор кода на ваш выбор, например nano или Visual Studio Code
Веб-браузер
Знакомство с основами HTML. Вы можете ознакомиться с нашей серией руководств «Как создать веб-сайт с помощью HTML» для ознакомления.

Шаг 1 — Загрузка шрифтов и создание веб-страницы

Прежде чем мы начнем изучать правило @font-face, давайте настроим пример веб-страницы и каталога.

Из рабочего каталога создайте новую папку для нашего веб-сайта и подкаталог для наших файлов шрифтов:

mkdir -p ./website/fonts/

Перейдите в корневой каталог нашего нового проекта, website:

cd website

Отсюда мы будем запускать все оставшиеся команды.

Теперь мы будем использовать команду curl для загрузки шрифта Roboto Mono. Мы используем один аккуратно сгруппированный запрос GET.

Давайте загрузим два разных стиля и веса Roboto Mono, regular и 700italic:

curl -o ./fonts/fontfiles.zip "https://google-webfonts-helper.herokuapp.com/api/fonts/roboto-mono?download=zip&subsets=latin,latin-ext&variants=regular,700italic&formats=woff,woff2,ttf"

Обратите внимание, как мы указываем варианты, которые нам нужны из семейства шрифтов Roboto Mono. Затем мы указываем форматы, которые мы хотели бы использовать для каждого из них. Мы запрашиваем форматы ttf, woff и woff2. Формат woff2 — это самый современный формат веб-шрифтов, но это формат TrueType или ttf. Это даст нам отличный охват, но когда мы будем писать наш CSS, мы предоставим больше резервных вариантов, используя стандартные шрифты. Свойство font-display также поможет нам управлять загрузкой шрифтов для разных пользователей.

Теперь разархивируйте загруженное содержимое в нашу папку ./fonts. На машинах под управлением Linux и macOS используйте следующую команду:

unzip ./fonts/fontfiles.zip -d ./fonts

Изучите содержимое папки ./fonts:

ls ./fonts

Теперь мы находим шесть новых файлов — файл .ttf, .woff и файл .woff2 для каждого шрифта.

Загрузив наши шрифты, давайте напишем немного CSS и используем его для стилизации HTML-элемента.

Шаг 2 — Использование правила @font-face

На этом этапе мы применим загруженные шрифты с помощью свойства @font-face.

Используя nano или предпочитаемый вами текстовый редактор, создайте и откройте файл с именем style.css:

nano style.css

Добавьте следующий контент, который определит правило @font-face с путями к нашим файлам:

@font-face {
  font-family: 'Roboto Mono', monospace;
  src: url(fonts/roboto-mono-v12-latin-regular.woff2) format('woff2'),
       url(fonts/roboto-mono-v12-latin-regular.woff) format('woff'),
       url(fonts/roboto-mono-v12-latin-regular.ttf) format('truetype');
}

@font-face {
  font-family: 'Roboto Mono', monospace;
  src: url(fonts/roboto-mono-v12-latin-700italic.woff2) format('woff2'),
       url(fonts/roboto-mono-v12-latin-700italic.woff) format('woff'),
       url(fonts/roboto-mono-v12-latin-700italic.ttf) format('truetype');
  font-weight: 700;
  font-style: italic;
}

h1, p {
  font-family: 'Roboto Mono', monospace;
}

h1 {
  font-family: 'Roboto Mono', monospace;
  font-weight: 700;
  font-style: italic;
}

Давайте рассмотрим этот код блок за блоком.

Всегда сначала определяйте at-правила @font-face в основном файле CSS. Для самой простой версии правила @font-face требуются свойства font-family и src. В нашем первом блоке мы указываем Roboto Mono в качестве значения для font-family и указываем пути к нашим трем файлам для src, каждый в другом формате и в порядке убывания приоритета.

Во втором блоке мы предоставляем то же значение font-family, но используем пути к нашей 700italic версии Roboto Mono. Затем мы определяем два свойства: font-weight и font-style. Мы будем использовать эти свойства, чтобы определить, где мы хотим использовать эту вторую версию Roboto Mono.

В следующих двух блоках мы определяем пользовательские стили для элементов <h1> и <p>. Обратите внимание, как мы используем font-family для определения обоих, но затем добавляем font-weight и font-style в блок, специфичный для <h1>. Это отобразит наши заголовки H1 в Roboto Mono 700italic вместо Roboto Mono regular.

Сохраните и закройте файл.

Теперь давайте создадим небольшую HTML-страницу с несколькими тегами <h1> и <p>.

Создайте и откройте новый файл с именем index.html:

nano index.html

Добавьте следующий код, который будет определять заголовок и строку текста:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>CSS @font-face</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1> Roboto Mono font, 700italic </h1>
  <p> Roboto Mono font, regular </p>
</body>
</html>

Сохраните и закройте файл.

Загрузите index.html в веб-браузере. Вы увидите, что ваш заголовок отображается в Roboto Mono 700italic, а текст вашего абзаца отображается в Roboto Mono regular, например:

Теперь, когда наше свойство @font-face работает, давайте воспользуемся font-display для настройки того, как и когда будут загружаться шрифты.

Шаг 3 — Использование font-display для управления загрузкой шрифта

С помощью font-display мы можем точно контролировать, как мы хотим загружать наши шрифты. Это может значительно улучшить взаимодействие с пользователем при использовании пользовательских шрифтов.

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

Один из способов справиться с FOUT — использовать такой инструмент, как Font Style Matcher, чтобы найти запасной шрифт, максимально близкий к пользовательскому шрифту, чтобы изменение шрифта не казалось таким радикальным. Однако мы можем использовать свойство font-display для более элегантного решения этих проблем.

Чтобы противостоять проблемам с загрузкой, font-display принимает одно из 5 значений:

auto: используется поведение браузера по умолчанию, которое может различаться.
block: сначала текст скрыт на короткое время, но когда он станет доступным, он изменится на пользовательский шрифт. Говорят, что это одно значение имеет бесконечный период swap.
swap: текст никогда не скрывается и меняется на пользовательский шрифт, когда он становится доступным. Это также обеспечивает бесконечный период обмена.
fallback: текст скрыт на очень короткий период (период блокировки), затем следует короткий период замены. Если пользовательский шрифт не загружается в течение периода подкачки, значит, он вообще не загружается.
необязательный: тексту дается очень короткий период блокировки для загрузки (~ 100 мс). Если шрифт не загружается в течение этого периода блокировки, используется резервный шрифт, а пользовательский шрифт вообще не загружается. Однако шрифт по-прежнему загружается и кэшируется за кулисами. Это означает, что при последующих загрузках страницы пользовательский шрифт станет доступным в кеше, а затем будет загружаться мгновенно.

Значение необязательный для font-display обеспечивает надежное решение для многих ситуаций загрузки шрифтов. Давайте добавим его в наш собственный CSS.

Снова откройте style.css:

nano style.css

Теперь добавьте выделенный код:

@font-face {
  font-family: 'Roboto Mono', monospace;
  src: url(fonts/roboto-mono-v12-latin-regular.woff2) format('woff2'),
       url(fonts/roboto-mono-v12-latin-regular.woff) format('woff'),
       url(fonts/roboto-mono-v12-latin-regular.ttf) format('truetype');
  font-display: optional;
}

@font-face {
  font-family: 'Roboto Mono', monospace;
  src: url(fonts/roboto-mono-v12-latin-700italic.woff2) format('woff2'),
       url(fonts/roboto-mono-v12-latin-700italic.woff) format('woff'),
       url(fonts/roboto-mono-v12-latin-700italic.ttf) format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: optional;
}

h1, p {
  font-family: 'Roboto Mono', monospace;
}

h1 {
  font-family: 'Roboto Mono', monospace;
  font-weight: 700;
  font-style: italic;
}

Теперь наш пользовательский шрифт будет либо загружаться так быстро, что пользователь никогда не увидит FOUT или FOIT, либо вообще не будет загружаться. Тем не менее, он по-прежнему будет загружаться и загружаться мгновенно при обновлении или посещении других страниц.

Заключение

В этом руководстве мы загрузили собственный шрифт и использовали свойство @font-face, чтобы добавить его на веб-страницу. Затем мы использовали свойство font-display, чтобы управлять тем, как будет загружаться пользовательский шрифт, если вообще будет загружаться. Чтобы узнать больше о font-display и связанных свойствах, изучите соответствующую документацию в Mozilla Developer Network.