CSS обладает рядом правил, которые позволяют пользователям переопределять системные шрифты на страницах, сегодня мы обсудим свойства @font-face для добавления шрифта на страницу, и свойство @font-display, чтобы управлять отображением шрифта на странице.
@font-face – это CSS-правило, используемое для определения пользовательских шрифтов. С помощью @font-face можно указать путь к файлу шрифта (он должен быть размещен на том же сервере, что и ваш файл CSS). Это правило существует уже довольно давно, но у него появилось новое свойство font-display, которое поддерживает другие параметры.
В этом мануале мы покажем, как использовать @font-face для загрузки шрифта на веб-страницу. Для этого мы скачаем популярный открытый шрифт, Roboto Mono. При помощи свойства font-display мы настроим отображение шрифта – это позволит нам создать лучший пользовательский интерфейс.
Требования
- Редактор кода (например nano или Visual Studio Code).
- Веб-браузер.
- Базовые навыки работы с HTML. Если ранее вы не работали с HTML, рекомендуем предварительно изучить первые десять руководств серии Создание веб-сайта с помощью HTML.
1: Загрузка шрифтов и создание веб-страницы
Прежде чем мы начнем изучать правило @font-face, мы должны создать тестовую веб-страницу и каталог.
В рабочем каталоге создайте новую папку для тестового сайта и подкаталог для файлов шрифтов:
mkdir -p ./website/fonts/
Перейдите в корневой каталог нового проекта, который называется website:
cd website
Из этого каталога мы будем запускать все остальные команды.
Теперь мы воспользуемся командой curl, чтобы загрузить шрифт Roboto Mono. Мы используем популярное приложение google-webfonts-helper, которое позволяет загружать несколько шрифтов непосредственно из сети доставки контента Google при помощи одного аккуратного GET-запроса.
Давайте загрузим два разных по стилю и толщине вида Roboto Mono, regular and 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 – это самый современный формат веб-шрифтов, но woff2 все еще не поддерживается некоторыми браузерами. Поэтому мы также загрузим запасной вариант – формат woff, который имеет широкую поддержку (включая Internet Explorer 9) и формат 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;
}
Давайте подробно рассмотрим этот код.
Определять правила @font-face всегда нужно в главном файле CSS. Самая простая версия правила @font-face требует свойств font-family и src. В первом блоке кода мы указываем Roboto Mono в качестве значения для свойства font-family, а в src предоставляем пути к трем файлам в разных форматах – это делается в порядке убывания приоритета.
Во втором блоке свойство font-family имеет то же значение, но тут мы указываем пути к версии 700italic. Затем мы определяем два свойства: 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:
Roboto Mono font, 700 italic
Roboto Mono font, regular
Теперь, когда вы знаете, как работает свойство @font-face, мы попробуем использовать font-display, чтобы настроить отображение шрифтов на странице.
3: Управление отображением шрифтов с помощью font-display
С помощью font-display мы можем точно контролировать отображение шрифтов на странице. Это может значительно улучшить пользовательский опыт.
Иногда при использовании нестандартных шрифтов пользователь может столкнуться с FOUT (вспышкой неоформленного текста – flash of unstyled text) или FOIT (вспышкой невидимого текста – flash of invisible text) при первой загрузке страницы. Некоторые браузеры предпочитают отображать текст сразу, даже если нестандартный шрифт еще не загружен. Браузер отобразит нужный шрифт после полной загрузки, но в результате пользователь столкнется с FOUT. Также бывает, что браузер на короткое время скрывает текст, если шрифт еще не загрузился – это FOIT. Если шрифт не загружается в течение определенного периода, браузер использует запасной шрифт.
Один из способов справиться с FOUT –использовать инструмент Font Style Matcher, который помогает найти резервный шрифт, максимально приближенный к пользовательскому (чтобы изменение шрифта не было таким резким). Однако для более гибкой обработки подобных проблем можно использовать свойство font-display.
Чтобы устранить проблемы с загрузкой шрифтов на странице, font-display принимает одно из 5 значений:
- auto: использует стандартное поведение браузера (которое может отличаться от браузера к браузеру).
- block: текст скрывается на короткий период и отображается после загрузки пользовательского шрифта. Считается, что это значение имеет бесконечный период подмены шрифта.
- swap: браузер не скрывает текст, а меняет шрифт на пользовательский, когда он становится доступным. Это значение также предусматривает бесконечный период подмены.
- fallback: текст скрывается на очень короткий период (это называется период блокировки шрифта), а затем у браузера есть короткий период подмены. Если пользовательский шрифт не загружается в течение периода подмены, он не загружается вообще.
- optional: на загрузку тексту дается очень короткий период блокировки шрифта (~100 мс). Если шрифт не загружается в течение этого периода блокировки, браузер использует резервный шрифт, а пользовательский шрифт после этого вообще не отображается. Однако браузер будет пытаться незаметно загрузить и кешировать пользовательский шрифт: при последующих загрузках страницы пользовательский шрифт станет доступным в кеше, а затем отобразится на странице.
Значение optional параметра 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.