Google представил для всех бесплатный веб-интерфейс каталога шрифтов Google Font Directory и собственно интерфейса Google Font API, который позволяет веб-мастерам легко и эффективно пользоваться шрифтами, отличающимися от стандартного набора веб-безопасных шрифтов просто подключив выбранный шрифт в CSS.
Как использовать Google Font API
Шаг 1. Добавить ссылку таблицы стилей выбранного шрифта
Выберите понравивишийся из каталога шрифт и вставьте его название в Font+Name.
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name">
Шаг 2. Использование шрифта для изменения HTML элементов
CSS selector {
font-family: 'Font Name', serif;
}
То есть вместо CSS selector вставляете: h1, li, a и т.д.
Если Вы собираетесь использовать данный шрифт только один раз, можете декларировать стиль в HTML:
<div style="font-family: 'Font Name', serif;">Ваш текст</div>
И, как вы наверно заметили, в примерах используется также "откатной" шрифт serif - на случай не работоспособности сервиса Google. Можно использовать и другой безопасный шрифт.
Пример использования Google Font API
Выбран шрифт Tangerine, в качестве "отката" - шрифт serif.
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
<style>
body {
font-family: 'Tangerine', serif;
font-size: 48px;
}
</style>
</head>
<body>
<h1>Пример текста заголовка</h1>
</body>
</html>
Загрузка нескольких шрифтов из Google Font API
Чтобы не перегружать сайт лишними запросами, сделаем один запрос сразу на все шрифты, которые мы хотим использовать на сайте.
http:
Разделяйте названия шрифтов | без пробелов между ними. Обратите внимание на + в шрифте Droid Sans. Используйте + в названиях шрифтов, где есть пробелы. В нашем случае название шрифта Droid Sans, поэтому будем в запросе записывать Droid+Sans.
Используйте двоеточие ":" после названия шрифта (без пробелов), чтобы загрузить дргуие вариации шрифта (например, italic, bold, bolditalic) или короткий код вариации (например, i, b, bi). Если предполается использовать различные вариации для одного шрифта, указывайте их без пробелов, разделяя запятыми.
http:
Для кирилических (Cyrillic) шрифтов (или других: latin, Greek, Khmer) нужно будет указать в запросе, какой именно тип подгружать у шрифта.
Например для шрифта Philosopher подгрузим только кирилицу:
http:
или же погрузим сразу и кирилицу и латиницу:
http:
Вот такую полезную штуку придумали ребята из Гугл.
|