Использование Google API для доступа к переменным шрифтов

Использование Google API для доступа к переменным шрифтов

От автора: веб-сайт 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, поэтому я была рада, что оба этих варианта остались.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Что касается изменений в том, как мы ссылаемся на сами шрифты, есть пара отличий. То, как мы определяем семейство шрифтов, остается тем же, но способ, которым мы запрашиваем толщину, или другую ось, немного отличается. Ранее мы бы сделали что-то вроде приведенного ниже, где толщины или значения шрифта были разделены запятыми.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

В новом API мы должны указать ось, например, wght, и значение, где несколько значений разделены точкой с запятой. Вот как использовать API для стандартных, не переменных, шрифтов.

Если вы хотите использовать полный диапазон толщин, доступных в переменном шрифте, вы можете запросить их немного по-другому, это называется в API группы значений оси (или кортежи), они не могут перекрываться, и они должны быть отсортированы в числовом порядке.

Когда дело доходит до использования шрифта в текущем CSS, здесь все работает точно так же, мы можем установить для селектора font-family и выбрать толщину из диапазона, который мы запрашивали в Google API.

Вы можете увидеть полную реализацию в примере на Codepen. Наслаждайтесь и делайте классные вещи.

Автор: Mandy

Источник: https://variablefonts.dev

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Фреймворк Bootstrap 4. Быстрый старт

Изучите основы Bootstrap 4 на практическом примере по верстке блога с нуля!

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий