В этом руководстве объясняется, как использовать API Google Fonts для добавления шрифтов на ваши веб-страницы. Вам не нужно заниматься программированием; все, что вам нужно сделать, это добавить специальную ссылку на таблицу стилей в ваш 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.
Обзор
Вы можете начать использовать API Google Fonts всего за два шага:
Добавьте ссылку на таблицу стилей, чтобы запросить нужные веб-шрифты:
<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» .
Указание семейств и стилей шрифтов в URL-адресе таблицы стилей
Чтобы определить, какой URL-адрес использовать в ссылке на таблицу стилей, начните с базового URL-адреса API Google Fonts:
https://fonts.googleapis.com/css
Затем добавьте параметр URL-адреса family= с одним или несколькими названиями и стилями семейств шрифтов.
Например, чтобы запросить шрифт Inconsolata :
https://fonts.googleapis.com/css?family=Inconsolata
Чтобы запросить несколько семейств шрифтов, разделите имена вертикальной чертой ( | ).
Например, чтобы запросить шрифты Tangerine , Inconsolata и Droid Sans :
https://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans
Запрос нескольких шрифтов позволяет вам использовать все эти шрифты на своей странице. (Но не переусердствуйте: большинству страниц не требуется очень много шрифтов, а запрос большого количества шрифтов может замедлить загрузку страниц.)
API Google Fonts по умолчанию предоставляет обычную версию запрошенных шрифтов. Чтобы запросить другие стили или насыщенность, добавьте двоеточие ( : ) к имени шрифта, а затем список стилей или насыщенности, разделенных запятыми ( , ).
Например:
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 поддерживают несколько шрифтов (например, латиницу, кириллицу и греческий). Чтобы указать, какие подмножества следует загрузить, к URL-адресу следует добавить параметр subset.
Например, чтобы запросить кириллицу шрифта 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
Латинское подмножество всегда включается, если оно доступно, и его не нужно указывать. Обратите внимание: если клиентский браузер поддерживает диапазон юникода ( http://caniuse.com/#feat=font-unicode-range ), параметр subset игнорируется; браузер выберет из подмножеств, поддерживаемых шрифтом, чтобы получить то, что ему нужно для отображения текста.
Полный список доступных шрифтов и подмножеств шрифтов см. в 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= в запрос API Google Fonts и добавьте соответствующее имя класса к элементам 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 » и просмотрите множество идей, которые уже есть в Интернете!
дальнейшее чтение
- Полный список семейств шрифтов, предоставленный API Google Fonts, см. на сайте Google Fonts .
- Узнайте, как использовать веб-загрузчик шрифтов , чтобы лучше контролировать загрузку шрифтов.
- Узнайте больше о том, как работает API Google Fonts, на странице «Технические соображения» .