От автора: веб-сайт Google Fonts является отличным ресурсом, и, учитывая постоянно растущий интерес к переменным шрифтам, часто возникает вопрос, будут ли Google Fonts иметь переменные шрифтов, и если да, то как мы будем их использовать?
Что ж, хорошей новостью является то, что да, у Google Fonts будут переменные шрифтов, и, что более важно, они выпустили обновленную версию своего API, которая позволит вам использовать переменные шрифтов в полной мере.
Google объявил о новом API в ATypI Tokyo (2019) и выпустил демонстрационную версию на Codepen с некоторыми примерами доступных в настоящее время переменных шрифтов. Я проведу короткий ее обзор, но Джейсон Палмент написал отличный пост, в котором углубится в некоторые подробности, вы можете прочитать его на Medium, если захотите: переменные шрифтов и новый Google Fonts API.
Посмотрев Codepen, можно заключить, что V2 API довольно прост в использовании и не слишком сильно отличается от текущей реализации API Google Fonts.
Вы можете использовать API import в CSS или элемент внешнего ресурса в HTML с помощью link. Я обычно использую link, поэтому я была рада, что оба этих варианта остались.
<link href="https://fonts.googleapis.com/css2?family=Fira%20Code:[email protected]&display=swap" rel="stylesheet" >
@import url('https://fonts.googleapis.com/css2?family=Fira%20Code:[email protected]&display=swap');Что касается изменений в том, как мы ссылаемся на сами шрифты, есть пара отличий. То, как мы определяем семейство шрифтов, остается тем же, но способ, которым мы запрашиваем толщину, или другую ось, немного отличается. Ранее мы бы сделали что-то вроде приведенного ниже, где толщины или значения шрифта были разделены запятыми.
https://fonts.googleapis.com/css?family=Fira+Code:400,700&display=swap
В новом API мы должны указать ось, например, wght, и значение, где несколько значений разделены точкой с запятой. Вот как использовать API для стандартных, не переменных, шрифтов.
css2?family=Fira%20Code:wght@300;700
Если вы хотите использовать полный диапазон толщин, доступных в переменном шрифте, вы можете запросить их немного по-другому, это называется в API группы значений оси (или кортежи), они не могут перекрываться, и они должны быть отсортированы в числовом порядке.
css2?family=Fira%20Code:[email protected]
Когда дело доходит до использования шрифта в текущем CSS, здесь все работает точно так же, мы можем установить для селектора font-family и выбрать толщину из диапазона, который мы запрашивали в Google API.
h1 { font-family: "Fira Code"; font-weight: 278;
}Вы можете увидеть полную реализацию в примере на Codepen. Наслаждайтесь и делайте классные вещи.
Автор: Mandy
Источник: https://variablefonts.dev
Редакция: Команда webformyself.