В этом руководстве объясняется, как использовать 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, на странице « Технические вопросы».