В этом руководстве объясняется, как использовать Google Fonts API для добавления шрифтов на веб-страницы. Вам не нужно делать какое-либо программирование; все, что вам нужно сделать, это добавить ссылку на специальную таблицу стилей в ваш HTML-документ, а затем обратиться к шрифту в стиле CSS.
Быстрый пример
Вот пример. Скопируйте и вставьте следующий HTML-код в файл:
<html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine"> <style> body { font-family: 'Tangerine', serif; font-size: 48px; } </style> </head> <body> <div>Making the Web Beautiful!</div> </body> </html>
Затем откройте файл в современном веб-браузере. Вы должны увидеть страницу со следующим шрифтом Tangerine:
Это предложение представляет собой обычный текст, поэтому вы можете изменить его внешний вид с помощью CSS. Попробуйте добавить тень к стилю из предыдущего примера:
body { font-family: 'Tangerine', serif; font-size: 48px; text-shadow: 4px 4px 4px #aaa; }
Теперь вы должны увидеть тень под текстом:
И это только начало того, что вы можете сделать с помощью Fonts API и CSS.
Обзор
Вы можете начать использовать Google Fonts API всего за два шага:
Добавьте ссылку на таблицу стилей, чтобы запросить нужный веб-шрифт:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Font+Name">
Настройте элемент с помощью запрошенного веб-шрифта либо в таблице стилей:
.css-selector { font-family: 'Font Name', serif; }
или со встроенным стилем самого элемента:
<div style="font-family: 'Font Name', serif;">Your text</div>
Список шрифтов, которые вы можете использовать, см. в Google Fonts .
Указание семейств шрифтов и стилей в URL-адресе таблицы стилей
Чтобы определить, какой URL-адрес использовать в ссылке на таблицу стилей, начните с базового URL-адреса Google Fonts API:
https://fonts.googleapis.com/css
Затем добавьте параметр family=
URL с одним или несколькими именами семейств шрифтов и стилями.
Например, чтобы запросить шрифт Inconsolata :
https://fonts.googleapis.com/css?family=Inconsolata
Чтобы запросить несколько семейств шрифтов, разделите имена вертикальной чертой ( |
).
Например, чтобы запросить шрифты Tangerine , Inconsolata и Droid Sans :
https://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans
Запрос нескольких шрифтов позволяет использовать все эти шрифты на вашей странице. (Но не переусердствуйте: большинству страниц не требуется очень много шрифтов, а запрос большого количества шрифтов может замедлить загрузку ваших страниц.)
Google Fonts API по умолчанию предоставляет обычную версию запрошенных шрифтов. Чтобы запросить другие стили или веса, добавьте двоеточие ( :
) к имени шрифта, за которым следует список стилей или весов, разделенных запятыми ( ,
).
Например:
https://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans
Чтобы узнать, какие стили и веса доступны для данного шрифта, см. список шрифтов в Google Fonts .
Для каждого стиля, который вы запрашиваете, вы можете дать либо полное название, либо аббревиатуру; для весов вы также можете указать числовой вес:
Стиль | Спецификаторы |
---|---|
курсив | italic или i |
смелый | bold или b или числовой вес, например 700 |
полужирный курсив | bolditalic или bi |
Например, чтобы запросить курсив Cantarell и полужирный шрифт Droid Serif, вы можете использовать любой из следующих URL-адресов:
https://fonts.googleapis.com/css?family=Cantarell:italic|Droid+Serif:bold https://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:b https://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:700
Использовать отображение шрифта
font-display позволяет вам управлять тем, что происходит, когда шрифт недоступен. Указание значения, отличного от auto
по умолчанию, обычно является подходящим.
Передайте желаемое значение в параметре display
строки запроса:
https://fonts.googleapis.com/css?family=Roboto&display=swap
Указание подмножеств сценариев
Некоторые шрифты в Google Font Directory поддерживают несколько шрифтов (например, латинский, кириллический и греческий). Чтобы указать, какие подмножества должны быть загружены, параметр подмножества должен быть добавлен к URL-адресу.
Например, чтобы запросить кириллическое подмножество шрифта Roboto Mono , URL-адрес будет таким:
https://fonts.googleapis.com/css?family=Roboto+Mono&subset=cyrillic
Чтобы запросить греческое подмножество шрифта Roboto Mono , URL-адрес будет следующим:
https://fonts.googleapis.com/css?family=Roboto+Mono&subset=greek
Чтобы запросить как греческие, так и кириллические подмножества шрифта Roboto Mono , URL-адрес будет следующим:
https://fonts.googleapis.com/css?family=Roboto+Mono&subset=greek,cyrillic
Латинское подмножество всегда включается, если доступно, и его не нужно указывать. Обратите внимание, что если клиентский браузер поддерживает unicode-range ( http://caniuse.com/#feat=font-unicode-range ), параметр подмножества игнорируется; браузер будет выбирать из подмножеств, поддерживаемых шрифтом, чтобы получить то, что ему нужно для отображения текста.
Полный список доступных шрифтов и подмножеств шрифтов см. в Google Fonts .
Оптимизация запросов шрифтов
Часто, когда вы хотите использовать веб-шрифт на своем веб-сайте или в приложении, вы заранее знаете, какие буквы вам понадобятся. Это часто происходит, когда вы используете веб-шрифт в логотипе или заголовке.
В этих случаях вам следует рассмотреть возможность указания значения text=
в URL-адресе запроса шрифта. Это позволяет Google вернуть файл шрифта, оптимизированный для вашего запроса. В некоторых случаях это может уменьшить размер файла шрифта до 90%.
Чтобы использовать эту функцию, просто добавьте text=
в свои запросы API Google Fonts. Например, если вы используете Inconsolata только для заголовка своего блога, вы можете поместить сам заголовок в качестве значения text=
. Вот как будет выглядеть запрос:
https://fonts.googleapis.com/css?family=Inconsolata&text=Hello
Как и для всех строк запроса, вы должны закодировать значение в URL-адресе:
https://fonts.googleapis.com/css?family=Inconsolata&text=Hello%20World
Эта функция также работает для международных шрифтов, позволяя вам указывать символы UTF-8. Например, ¡Привет! представлен как:
https://fonts.googleapis.com/css?family=Inconsolata&text=%c2%a1Hola!
Включение эффектов шрифта (бета-версия)
Создавая заголовки или отображая тексты на своем веб-сайте, вы часто хотите стилизовать текст в декоративном стиле. Чтобы упростить вашу работу, Google предоставил набор эффектов для шрифтов, которые можно использовать с минимальными усилиями для создания красивого отображаемого текста. Например:
Чтобы использовать эту бета-функцию, просто добавьте effect=
в запрос Google Fonts API и добавьте соответствующее имя класса к элементам HTML, на которые вы хотите повлиять. В нашем примере выше мы использовали эффект shadow-multiple
шрифта, поэтому запрос будет выглядеть так:
https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple
Чтобы использовать эффект, добавьте соответствующее имя класса к элементу (элементам) HTML. Соответствующее имя класса всегда является именем эффекта с префиксом font-effect-
, поэтому имя класса для shadow-multiple
будет font-effect-shadow-multiple
:
<div class="font-effect-shadow-multiple">This is a font effect!</div>
Вы можете запросить несколько эффектов, разделив имена эффектов вертикальной чертой ( |
).
https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple|3d-float
Вот полный список всех эффектов шрифта, которые мы предлагаем:
Эффект | Имя API | Имя класса | Поддерживать |
---|---|---|---|
Анаглиф | anaglyph | font-effect-anaglyph | Хром, Фаерфокс, Опера, Сафари |
Кирпичный знак | brick-sign | font-effect-brick-sign | Хром, Сафари |
Печать на холсте | canvas-print | font-effect-canvas-print | Хром, Сафари |
Треск | crackle | font-effect-crackle | Хром, Сафари |
decaying | font-effect-decaying | Хром, Сафари | |
Разрушение | destruction | font-effect-destruction | Хром, Сафари |
огорченный | distressed | font-effect-distressed | Хром, Сафари |
Проблемная древесина | distressed-wood | font-effect-distressed-wood | Хром, Сафари |
Тиснение | emboss | font-effect-emboss | Хром, Фаерфокс, Опера, Сафари |
Огонь | fire | font-effect-fire | Хром, Фаерфокс, Опера, Сафари |
Огненная анимация | fire-animation | font-effect-fire-animation | Хром, Фаерфокс, Опера, Сафари |
Хрупкий | fragile | font-effect-fragile | Хром, Сафари |
Трава | grass | font-effect-grass | Хром, Сафари |
Лед | ice | font-effect-ice | Хром, Сафари |
Митоз | mitosis | font-effect-mitosis | Хром, Сафари |
Неон | neon | font-effect-neon | Хром, Фаерфокс, Опера, Сафари |
Контур | outline | font-effect-outline | Хром, Фаерфокс, Опера, Сафари |
Паттинг Грин | putting-green | font-effect-putting-green | Хром, Сафари |
Потертая сталь | scuffed-steel | font-effect-scuffed-steel | Хром, Сафари |
Множественная тень | shadow-multiple | font-effect-shadow-multiple | Хром, Фаерфокс, Опера, Сафари |
Расколотый | splintered | font-effect-splintered | Хром, Сафари |
Статический | static | font-effect-static | Хром, Сафари |
Стоунвош | stonewash | font-effect-stonewash | Хром, Сафари |
Трехмерный | 3d | font-effect-3d | Хром, Фаерфокс, Опера, Сафари |
Трехмерный поплавок | 3d-float | font-effect-3d-float | Хром, Фаерфокс, Опера, Сафари |
Винтаж | vintage | font-effect-vintage | Хром, Сафари |
Обои | wallpaper | font-effect-wallpaper | Хром, Сафари |
Есть еще много способов стилизовать ваши шрифты, и многие вещи возможны с помощью CSS. Мы просто предлагаем несколько идей, чтобы вы начали. Чтобы найти больше идей, попробуйте поискать в Google « текстовые эффекты css » и просмотрите множество идей, которые уже есть в Интернете!
дальнейшее чтение
- Полный список семейств шрифтов, предоставляемых Google Fonts API, см. в Google Fonts .
- Узнайте, как использовать загрузчик веб-шрифтов , чтобы лучше контролировать загрузку шрифтов.
- Узнайте больше о том, как работает Google Fonts API, на странице « Технические вопросы».