Чтобы не перегружать сайт лишними запросами, сделаем один запрос сразу на все шрифты, которые мы хотим использовать на сайте.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Вот такую полезную штуку придумали ребята из Гугл.
Загрузка нескольких шрифтов из Google Font API
Выбран шрифт Tangerine, в качестве "отката" - шрифт serif.<html>P <head>PPP <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">PPP <style>PPPPP body {PPPPPPP font-family: 'Tangerine', serif;PPPPPPP font-size: 48px;PPPPP }PPP </style>P </head>P <body>PPP <h1>Пример текста заголовка</h1>P </body></html>
Пример использования 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 {P font-family: 'Font Name', serif;}То есть вместо CSS selector вставляете: h1, li, a и т.д.Если Вы собираетесь использовать данный шрифт только один раз, можете декларировать стиль в HTML:<div style="font-family: 'Font Name', serif;">Ваш текст</div>И, как вы наверно заметили, в примерах используется также "откатной" шрифт serif - на случай не работоспособности сервиса Google. Можно использовать и другой безопасный шрифт.
Google представил для всех бесплатный веб-интерфейс каталога шрифтов и собственно интерфейса , который позволяет веб-мастерам легко и эффективно пользоваться шрифтами, отличающимися от стандартного набора веб-безопасных шрифтов просто подключив выбранный шрифт в CSS.
Загрузка. Пожалуйста, подождите...
Шрифты Google API » Скрипты для сайтов
Комментариев нет:
Отправить комментарий