Гугл радует новыми сервисами постоянно. Вот сейчас наткнулся на новую фичу — Google Font API. С его помощью шрифтовые дрочеры и просто дизайнеры могут без затруднений донести до конечного пользователя всю мощь своего дизайнерского гения, показывая ему страницы сайта именно с теми шрифтами, которые имелись в виду в оригинал-макете. Немаловажно, что и с заказчиком будет гораздо проще общаться, а то ведь он обычно расстраивается, видя порой задрипаный Курьер вместо подразумеваемого Монако.
Пока вся эта штука помечена меткой beta, поэтому гарантировано работает только в Хроме, ФФ и Сафари.
В быстром старте мы с вами можем наблюдать, что АПИ шрифтов простое, как три копейки. Вот пример:
Ololo, username!
Строкой link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine" мы подключили CSS, которое описывает шрифт и дает ссылку на него.
@font-face {
font-family: 'Tangerine';
font-style: normal;
font-weight: normal;
src: local('Tangerine'), url('https://themes.googleusercontent.com/font?kit=HGfsyCL5WASpHOFnouG-RKCWcynf_cDxXwCLxiixG1c') format('truetype');
}
Теперь можно смело этим шрифтом щеголять:
Удобно. Можете потыкать мышкой, чтобы убедиться, что это не картинка, а действительно текст. Если не верите, давайте приподнимем текст над страницей немного.
.fontex2 {
...
text-shadow: 4px 4px 4px #aaa;
}
Полный каталог шрифтов, который можно получить по API, смотрите тут: http://code.google.com/webfonts
Можно запросить сразу несколько шрифтов в одной ссылкой. Например, так можно позвать шрифты Tangerine, Inconsolata, и Droid Sans:
http://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans
По умолчанию, подгружается только обычное начертание, жирный или курсив надо просить специально. Через двоеточие от имени шрифта, а несколько начертаний одного шрифта разделять запятой:
http://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans
Можно сокращать bold до b, italic до i, а bolditalic до bi.
Некоторые шрифты поддерживают разные наборы символов. К примеру, можно позвать шрифт Philosopher с поддержкой кириллицы, добавив параметр subset:
http://fonts.googleapis.com/css?family=Philosopher&subset=cyrillic
Вот такой шрифт:
Если нужны и латинские и кириллические символы, пишем через запятую:
subset=latin,cyrillic
Полный контроль веб-разработчики могут получить с Веб-загрузчиком шрифтов — библиотекой javascript, которая позволяет загружать шрифты от разных провайдеров и контролировать отображение текста по мере загрузки шрифтов.
В общем, вещь полезная. Надо брать.
Кстати, у меня тут забавная ситуация. При попытки входа в каталог шрифтов, Гугль пишет, что мой браузер не поддерживается и предлагает скачать Хром, либо использовать ФФ или Сафари. Но шутка в том, что хожу я через последнюю nix-версию Хрома.
В ФФ так же картинка. Но загрузка шрифтов и их отображение работает.