Google Fonts теперь полностью поддерживает переменные шрифты в обновлении API v2. Мы объясним, как вызывать как одно, так и несколько семейств шрифтов и как указывать диапазоны осей. Чтобы более подробно изучить вариативные шрифты, узнайте больше из этой интерактивно иллюстрированной брошюры Дэвида Берлоу из TypeNetwork.
Что нового
Все начинается с нового базового URL:
https://fonts.googleapis.com/css2
Синтаксис для определения стилей внутри каждого семейства был изменен и теперь описывает «пространства дизайна» переменных шрифтов.
Краткое руководство
Скопируйте и вставьте этот HTML-код в файл:
<html>
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Crimson+Pro">
<style>
body {
font-family: 'Crimson Pro', serif;
font-size: 48px;
}
</style>
</head>
<body>
<div>Making the Web Beautiful!</div>
</body>
</html>
Если открыть файл в браузере, страница должна отобразить текст «Как сделать Интернет красивым» шрифтом Crimson Pro.
Несколько семей
Чтобы запросить несколько семейств, укажите параметр family= для каждого семейства.
Например, чтобы запросить шрифты Crimson Pro и Literata :
https://fonts.googleapis.com/css2?family=Crimson+Pro&family=Literata
Скопируйте и вставьте этот HTML-код в файл:
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Crimson+Pro&family=Literata">
<style>
body {
font-size: 48px;
}
div:nth-child(1) {
font-family: 'Crimson Pro', serif;
}
div:nth-child(2) {
font-family: 'Literata’, serif;
}
</style>
</head>
<body>
<div>Making the Web Beautiful!</div>
<div>Making the Web Beautiful!</div>
</body>
</html>
При открытии файла в браузере страница должна отобразить текст «Как сделать Интернет красивым» сначала в Crimson Pro, затем в Literata.
Диапазоны осей
Вариативные шрифты предлагают непрерывные диапазоны стилей, часто без дополнительной задержки. Это актуально для адаптивного дизайна . Эта динамическая типографика использует непрерывные диапазоны стилей, предлагая все веса от 100 до 900 на странице и гибко изменяя вес в зависимости от некоторых условий.
Чтобы запросить диапазон переменной оси шрифта, соедините два значения с помощью ..
| Шрифт(ы) | Запрос |
|---|---|
Crimson Pro [ wght 200-900 ] | https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@200..900 |
Crimson Pro Italic [ wght 200-900 ] | https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@1,200..900 |
Crimson Pro Bold Italic и [ wght 200-900 ] | https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,200..900;1,700 |
Индивидуальные стили, такие как вес
Без спецификаций стиля API предоставляет стиль по умолчанию для запрошенного семейства. Чтобы запросить другие отдельные стили, например определенную толщину, добавьте двоеточие (:) после имени семейства шрифтов, за которым следует список ключевых слов свойств оси в алфавитном порядке, знак (@) и один или несколько списков значения для этих свойств оси.
Эти примеры показывают это в действии.
| Шрифт(ы) | Запрос |
|---|---|
| Багровый Про (по умолчанию) | https://fonts.googleapis.com/css2?family=Crimson+Pro |
| Багровый Про Жирный | https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@700 |
| Crimson Pro обычный и жирный | https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;700 |
| Crimson Pro Bold и Bold Italic | https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,700;1,700 |
Google Fonts перечисляет все стили, доступные для каждого семейства шрифтов.
Стиль по умолчанию
Если в запросе не указана позиция или диапазон оси, будет использоваться позиция по умолчанию. Положение оси курсива по умолчанию — 0 (обычное), а значение по умолчанию для оси веса — 400 (обычное).
Для семейств с осями, которые не содержат позицию по умолчанию, запросы, в которых не указаны позиции для этих осей, завершатся ошибкой. Например, при запросе семейства с осью веса от 500 до 900 необходимо указать положение веса.
Нестандартные веса
Для статических шрифтов вес стилей обычно указывается кратным 100 (например, 300, 400, 700). Вариативные шрифты имеют как стандартную, так и промежуточную насыщенность. Чтобы отобразить промежуточный вес:
https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@450
Оптимизация задержки и размера файла
Будьте точны в выборе стилей, которые вы используете. API предоставляет запрошенные стили в самом компактном наборе шрифтов. Запрос неиспользуемых стилей может привести к тому, что ваши пользователи загрузят больше данных шрифтов, чем им необходимо, что приведет к увеличению задержки. Если вы используете только 3 конкретных веса, укажите их в запросе как отдельные стили. Если вы используете непрерывный диапазон весов, укажите этот диапазон весов в своем запросе.
Использовать шрифт-дисплей
Свойство font-display позволяет вам контролировать, что происходит, пока шрифт еще загружается или недоступен по какой-либо другой причине. Обычно уместно указать значение, отличное от значения по умолчанию auto .
Передайте желаемое значение в параметре display :
https://fonts.googleapis.com/css2?family=Crimson+Pro&display=swap
Оптимизация запросов на шрифты
Зачастую, когда вы хотите использовать веб-шрифт на своем сайте или в приложении, вы заранее знаете, какие буквы вам понадобятся. Это часто происходит, когда вы используете веб-шрифт в логотипе или заголовке.
В этих случаях вам следует рассмотреть возможность указания значения text= в URL-адресе запроса шрифта. Это позволяет Google Fonts возвращать файл шрифта, оптимизированный для вашего запроса. В некоторых случаях это позволяет уменьшить размер файла шрифта до 90%.
Чтобы использовать эту функцию, просто добавьте text= в свой запрос API. Например, если вы используете Inconsolata только для заголовка своего блога, вы можете указать сам заголовок в качестве значения text= . Вот как будет выглядеть запрос:
https://fonts.googleapis.com/css2?family=Comfortaa&text=Hello
Как и в случае со всеми строками запроса, значение следует закодировать в URL-адресе:
https://fonts.googleapis.com/css2?family=Comfortaa&text=Hello%20World
Эта функция также работает для международных шрифтов, позволяя указывать символы UTF-8. Например, ¡Привет! представлен как:
https://fonts.googleapis.com/css2?family=Comfortaa&text=%c2%a1Hola!
Обратите внимание, что параметр text= можно указать только один раз. Это относится ко всем семьям, указанным в запросе. Используйте отдельные запросы API, если вам нужны разные оптимизации текста для нескольких семейств.
Формирование URL-адресов API
Строгость
В общем, обновленный CSS API более строг в отношении того, какие запросы принимаются, чем исходный CSS API.
Общие рекомендации:
- Перечислить оси в алфавитном порядке (локаль
en-US) - Группы значений оси (т. е. кортежи) необходимо сортировать численно.
- Кортежи не могут перекрываться или соприкасаться (например,
wght400..500 и 500..600).
Спецификация URL-адреса API
/css2?family=<spec>[&family=<spec>...][&text=<text>][&display=<display>]
spec : <family_name>[:<axis_tag_list>@<axis_tuple_list>]
family_name : название семейства шрифтов.
axis_tag_list : <axis>[,<axis>...] // Sorted alphabetically (en-US locale)
axis : тег оси, например ital , wdth , wght
axis_tuple_list : <axis_tuple>[;<axis_tuple>...]
axis_tuple : <value>[,<value>...] // Same length as axis_tag_list
value : <range> > | <float>
range : <float>..<float>
float : значение в пределах диапазона соответствующей оси.
text : текст, который будет отображаться запрошенным шрифтом.
display : auto | block | swap | fallback | optional
Поддержка устаревших браузеров
Браузеры без поддержки переменных шрифтов могут не отображать ваш дизайн должным образом. Проверьте поддержку переменных шрифтов браузерами на caniuse .
Практикуя прогрессивное улучшение , вы можете избежать неожиданного поведения в старых браузерах. Используйте запросы @supports в своем CSS для реализации функций переменных шрифтов.
В этом примере мы хотели бы использовать шрифт Markazi Text с толщиной 450, но нам придется вернуться к обычному (толщина 400) или среднему (толщина 500), если функции переменного шрифта не поддерживаются:
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Markazi+Text:wght@450" />
<style>
* {
font-family: 'Markazi Text';
font-weight: 400;
}
@supports (font-variation-settings: "wght" 450) {
* {
font-family: 'Markazi Text';
font-weight: 450;
}
}
</style>
Запрос CSS Markazi+Text:wght@450 отправляет вес 450 клиентам, которые поддерживают переменные шрифты, и веса 400 и 500 тем, кто этого не делает. Как правило, резервные варианты для диапазона вашего запроса будут доступны в устаревших браузерах.
| Ось | Резервные варианты |
|---|---|
ital | 0, 1 |
wght | 100, 200, 300, 400, 500, 600, 700, 800, 900 |
Эти примеры показывают, какие стили будут доступны в устаревших браузерах для нескольких разных запросов.
| Запрос | Стили, доступные в устаревших браузерах |
|---|---|
ital@0 | ital@0 |
wght@500 | wght@500 |
wght@432 | wght@400;500 |
wght@440..560 | wght@400;500;600 |
Доступные переменные шрифты
Таблицу переменных шрифтов, доступных в API v2, можно найти здесь .
Дальнейшее чтение
- Полный список семейств шрифтов, предоставленный API Google Fonts, см. на сайте Google Fonts .
- Узнайте больше о том, как работает API Google Fonts, на странице «Технические соображения» .