Linking google fonts in css

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

Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

Google Fonts теперь полностью поддерживает вариативные шрифты в обновлении v2 API. Мы объясним, как вызывать как одиночные, так и множественные семейства шрифтов и как указывать диапазоны осей. Для более глубокого изучения вариативных шрифтов узнайте больше из этой интерактивно иллюстрированной брошюры от Дэвида Берлоу из TypeNetwork.

Что нового

Все начинается с нового базового URL:

https://fonts.googleapis.com/css2 

Синтаксис для указания стилей в каждом семействе изменился, чтобы описать «пространства дизайна» переменного шрифта.

Краткое руководство

Скопируйте и вставьте этот HTML-код в файл:

    body 
Making the Web Beautiful!
   

При открытии файла в браузере на странице должен отображаться текст «Making the Web Beautiful» шрифтом Crimson Pro.

Несколько семей

Чтобы запросить несколько семейств, укажите параметр family= для каждого семейства.

Например, чтобы запросить шрифты Crimson Pro и Literata :

https://fonts.googleapis.com/css2?family=Crimson+Pro&family=Literata 

Скопируйте и вставьте этот HTML-код в файл:

    body < font-size: 48px; >div:nth-child(1) < font-family: 'Crimson Pro', serif; >div:nth-child(2) 
Making the Web Beautiful!
 
Making the Web Beautiful!
   

Используя браузер для открытия файла, страница должна отобразить текст «Делаем Интернет красивым» сначала в 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

Ваш браузер не поддерживает вариативные шрифты ( 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
Малиновый Про Обычный и Жирный	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

Строгость

В качестве общего замечания: обновленный API CSS более строг в отношении того, какие запросы принимаются, чем исходный API CSS.

• Список осей в алфавитном порядке (локаль en-US )
• Группы значений оси (т. е. кортежи) должны быть отсортированы в числовом виде.
• Кортежи не могут перекрываться или соприкасаться (например wght 400..500 и 500..600)

Спецификация URL-адреса API

family_name : Название семейства шрифтов

axis_tag_list : [,. ] // Sorted alphabetically (en-US locale)

axis : Тег оси, например ital , wdth , wght

axis_tuple : [,. ] // Same length as axis_tag_list

float : значение в пределах диапазона соответствующей оси

text : текст, который будет отображаться в запрошенном шрифте

display : auto | block | swap | fallback | optional

Поддержка старых браузеров

Браузеры без поддержки переменных шрифтов могут не отображать ваш дизайн должным образом. Проверьте поддержку переменных шрифтов в браузерах на caniuse .

Практикуя прогрессивное улучшение , вы можете избежать неожиданного поведения в этих старых браузерах. Используйте запросы @supports в вашем CSS, чтобы ограничить возможности переменных шрифтов.

В этом примере мы хотели бы использовать шрифт Markazi Text размером 450, но нам придется вернуться к обычному (ширина 400) или среднему (толщина 500), когда функции переменного шрифта не поддерживаются:

Запрос 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, на странице «Технические вопросы» .

Если не указано иное, контент на этой странице предоставляется по лицензии Creative Commons «С указанием авторства 4.0», а примеры кода – по лицензии Apache 2.0. Подробнее об этом написано в правилах сайта. Java – это зарегистрированный товарный знак корпорации Oracle и ее аффилированных лиц.

Последнее обновление: 2023-04-04 UTC.

Источник