Главная » 2014 » Сентябрь » 8 » Шрифты Google API
17:58
Шрифты Google API

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://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans


Разделяйте названия шрифтов | без пробелов между ними. Обратите внимание на + в шрифте Droid Sans. Используйте + в названиях шрифтов, где есть пробелы. В нашем случае название шрифта Droid Sans, поэтому будем в запросе записывать Droid+Sans.
Используйте двоеточие ":" после названия шрифта (без пробелов), чтобы загрузить дргуие вариации шрифта (например, italic, bold, bolditalic) или короткий код вариации (например, i, b, bi). Если предполается использовать различные вариации для одного шрифта, указывайте их без пробелов, разделяя запятыми.

 

 

http://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans


Для кирилических (Cyrillic) шрифтов (или других: latin, Greek, Khmer) нужно будет указать в запросе, какой именно тип подгружать у шрифта.
Например для шрифта Philosopher подгрузим только кирилицу:

 

 

http://fonts.googleapis.com/css?family=Philosopher&subset=cyrillic


или же погрузим сразу и кирилицу и латиницу:

 

 

http://fonts.googleapis.com/css?family=Philosopher&subset=latin,cyrillic


Вот такую полезную штуку придумали ребята из Гугл.

Категория: Для сайтов | Просмотров: 589 | Добавил: Лаврентий5932 | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]