Обновление CSS API

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
Похоже, ваш браузер не поддерживает переменные шрифты ( caniuse ). В браузере, который поддерживает варианты шрифтов, следующий текст должен отображаться в Crimson Pro как плавный набор весов от 400 до 500. CSS-анимация позволяет плавно менять стиль текста при взаимодействии.
Если ваш браузер полностью поддерживает переменные шрифты ( caniuse ), тогда следующий текст должен отображать Crimson Pro как плавный набор весов от 400 до 500. CSS-анимация может плавно менять стиль текста при взаимодействии.
Делаем Интернет красивым!
Делаем Интернет красивым!
Делаем Интернет красивым!
Делаем Интернет красивым!
Делаем Интернет красивым!
Делаем Интернет красивым!

Индивидуальные стили, такие как вес

Без спецификаций стиля 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
Похоже, ваш браузер не поддерживает переменные шрифты ( caniuse ). В браузере, который поддерживает варианты шрифтов, следующий текст должен отображаться в Crimson Pro с визуально различающейся насыщенностью 400, 450 и 500.
Если ваш браузер полностью поддерживает переменные шрифты ( caniuse ), следующий текст должен отображать Crimson Pro с визуально различающейся насыщенностью 400, 450 и 500.
Делаем Интернет красивым!
Делаем Интернет красивым!
Делаем Интернет красивым!

Оптимизация задержки и размера файла

Будьте точны в выборе стилей, которые вы используете. 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 )
  • Группы значений оси (т. е. кортежи) необходимо сортировать численно.
  • Кортежи не могут перекрываться или соприкасаться (например, 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

Доступные переменные шрифты

Таблицу переменных шрифтов, доступных в API v2, можно найти здесь .

Дальнейшее чтение