jkeks блог


Что такое Google Font API



3.10.2010 807 просмотров ;)


Эта замтка о том что такое Google Font API и на кой оно нам.. Русским ?

Как пишет GoodWin это мега полезная штуковина, только черт бы подрал этот IE в котором нихрена не работает.

Итак поехули.

С помощью Google Font API вы сможете на вашей странице легко использовать любы шрифты. и это очень красиво, при том вам не нужно ничего программировать (наверное за исключением IE). Вам нужно будет лишь подключить нужный CSS файл от Google и все.

Пример

<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>Making the Web Beautiful!</h1>
  </body>
</html>

Откройте файл в правильном Браузере (любом кроме IE) и вы увидите это:

Только у меня тут картинка, а у вас будет настоящий текст.

Смотреть то же самое и в правильном виде нужно на самой странице Google только на инглише.

И главное: вы можете менять размер шрифта и другие параметры с помощью именения свойств CSS, и это очень правильно.

body {
  font-family: 'Tangerine', serif;
  font-size: 48px;
  text-shadow: 4px 4px 4px #aaa;
}

 

У меня опять картинка, а на странице Google опять все правильно и тень настоящая, браузерная!

Как использовать Google Font API ?

1. Нужно добавить стиль

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name">

2. Укашите шрифт у нужного селектора

CSS selector {
  font-family: 'Font Name', serif;
}

или даже так:

<div style="font-family: 'Font Name', serif;">Your text</div>

Да и все. Кстати выбрать шрифты можно на этой Google странице Google Font Directory.

Теперь о том как указывать имена Шрифтов в URL ссылке.

Выбираете имя шрифта, меняете пробелы на ‘+’ пробелы(если их несколько, то через знак | пишите все, и все подставляете в строку типа такого:

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

Как обычно, это далеко н все и если вам стало инетерсно пишите, я добавлю некоторые вещщи касаемые Google Font API.





Видеочат рулетка
jAntivirus Рейтинг@Mail.ru