Google Fonts теперь полностью поддерживает вариативные шрифты в обновлении v2 API. Мы объясним, как вызывать как одиночные, так и множественные семейства шрифтов и как указывать диапазоны осей. Для более глубокого изучения вариативных шрифтов узнайте больше из этой интерактивно иллюстрированной брошюры от Дэвида Берлоу из 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>
При открытии файла в браузере на странице должен отображаться текст «Making the Web Beautiful» шрифтом 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 на странице и изменяя вес в зависимости от некоторых условий.
Чтобы запросить диапазон переменной оси шрифта, соедините 2 значения с помощью ..
Шрифт(ы) | Запрос |
---|---|
Кримсон Про [ wght 200-900 ] | https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@200..900 |
Малиновый 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 |
Малиновый Про Обычный и Жирный | 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
Строгость
В качестве общего замечания: обновленный API CSS более строг в отношении того, какие запросы принимаются, чем исходный API CSS.
Общие рекомендации:
- Список осей в алфавитном порядке (локаль
en-US
) - Группы значений оси (т. е. кортежи) должны быть отсортированы в числовом виде.
- Кортежи не могут перекрываться или соприкасаться (например
wght
400..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 |
Доступные вариативные шрифты
Таблицу вариативных шрифтов, доступных в v2 API, можно найти здесь .
дальнейшее чтение
- Полный список семейств шрифтов, предоставляемых Google Fonts API, см. в Google Fonts .
- Узнайте больше о том, как работает Google Fonts API, на странице «Технические вопросы» .