Второй урок курса "Демонстрация CSS3" будет посвящен шрифтам в web'e и особенностям их использования через правило @font-face.
Долгое время для создание красивой типографики в вебе приходилось пользоваться изображениями или громоздкими javascript-плагинами, с явлением мире CSS3 это стало доступно, просто и красиво =) Хотя есть свои хитрости и тонкости, о которых и пойдет речь в уроке.
Lesson2 Web fonts
На самом деле @font-face появился еще во второй версии CSS, но поддерживался он только браузером Internet Explorer (удивлены, да?), правда для этого создателям пришлось изобрести свой формат Embedded Open Type (.eot), и другие браузеры его конечно же не поддерживали и не поддерживают (а вот это уже не удивительно...). Internet Explorer до версии 9.0 поддерживает только шрифты формата EOT (Embedded OpenType). Большинство других браузеров поддерживают .ttf или .otf-шрифты.
Это мы возьмем на заметку себе, и пойдем дальше.
Шаг 1. Кроссбраузерный синтаксис.
@font-face относится к так называемым at-правилам, т.е. это ключевые слова (а не селекторы) перед которыми идет знак @ (at). At-правила CSS используются для подключения дополнительных стилей или шрифтов, установки кодировки CSS-файла и многого другого. At-правила лучше подключать в начале css-файла, причем правило @import должно идти перед ВСЕМИ иными правилами. Будьте с этим осторожны подключая шрифты через @font-face.
Использование @font-face состоит из двух частей
// Объявляем шрифт
@font-face {
font-family: 'Имя шрифта';
src: url('путь/до/него');
}
// Применяем шрифт
p {
font-family: 'Имя шрифта';
}
Так было бы в идеале, если бы был 1 браузер. Но их много. Радует, что практически все браузера поддерживают @font-face
Шрифты могут быть в форматах TTF, OTF, EOT, SVG и WOFF:
Internet Explorer (все версии) — EOT;
Firefox (начиная с 3.5) — TTF/OTF (WOFF добавлен с версии 3.6);
Opera (начиная с 10) — TTF/OTF;
Chrome (все версии) — SVG (TTF/OTF добавлены в конце января 2010-го);
Safari (начиная с 3.2) — TTF/OTF.
Как видим, у нас есть минимум три типа файлов, которые нужно подгружать EOT, TTF и SVG, можно добавить WOFF, чтобы Firefox был доволен.
Существует немало вариантов кроссбраузерного @font-face. Наиболее известный - этот:
@font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot?') format('eot'),
url('myfont-webfont.woff') format('woff'),
url('myfont-webfont.ttf') format('truetype'),
url('myfont-webfont.svg#svgFontName') format('svg');
}
В font-family необходимо указать имя нашего шрифта, именно так потом можно будет к нему обращаться при применении шрифта.
В src (source - "источник") идет подключение файлов шрифтов. Нужно подключить 4 файла, 4 и подключаем, через запятую.
Обратите внимание, что файл формата EOT стоит первым. Младшие версии IE не понимают запись при подключении нескольких форматов шрифтов, поэтому необходимо данный файл поставить первым и после ссылки добавить вопросительный знак ?, чтобы браузер на этом остановился.
Остальные браузеры поймут данную запись и выберут нужный им шрифт.
На заметку:
Можно также использовать параметр local(), который будет проверять есть ли шрифт на компьютере пользователя и если такого нет, то загрузит его с сервера:
@font-face {
font-family: 'Имя шрифта';
src: local('Имя шрифта');
}
Шаг 2. Где взять все эти шрифты?
Добрые люди придумали разные сервисы, помогающие сгенерировать все необходимое для использования правила @font-face.
Наиболее удобный - это Font Squirrel.. Здесь не только можно скачать множество бесплатных шрифтов, но и сгенерировать необходимые шрифты для правила @font-face, воспользовавшись генератором
http://www.fontsquirrel.com/fontface/generator
Если воспользоваться настройками Expert, то можно задать необходимые нам шрифты - это 4 уже упомянутых:
Дальше остается только загрузить шрифты на сервер и прописать нужные ссылки в правило. К слову, Font Squirrel сгенерирует и само правило, которое будет находиться в css-файле и даже превью для Вашего шрифта.
Шаг 3. Как победить лису?
В последних версиях браузера Firefox из-за того, что разработчики перемудрили с политикой безопасности нет возможности подключить шрифты, расположенные на другом домене.
Грубо говоря, если у Вас сайт имеет адрес http://mysite.ru/, а шрифты имеют ссылки http://uploads.ru/myfont.ttf , то огнелис просто откажется такие шрифты использовать. Особенно это актуально для пользователей mybb и компания, где нет возможность загрузить через опцию "Файлы" файлы шрифтов (точнее можно загрузить только svg, но вот беда - Firefox svg не поддерживает).
Но выход есть.
Возьмем нужный нам шрифт и пойдем с ним на Font Squirrel.
Далее пошагово:
1. Загружаем шрифт.
2. Выбираем настройки Expert
3. Устанавливаем нужные нам файлы, а также в настройке CSS выбираем Base64 Encode
4. Жмем Download и сохраняем себе на компьютер.
5. Загружаем файлы svg, eot (можно на сторонний хостинг)
6. Открываем файл stylesheet.css в блокноте или хтмл-редакторе и вставляем в нужные места ссылки на svg и eot.
7. Загружаем файл на форум/сторонний хостинг.
8. Экспортируем его в "Своем стиле" после
/* A1.1 */
@import url(style_cs.css);
@import url(ссылка на файл);
9. Profit! Лиса побеждена.
Шаг 4. Альтернативы
На данный момент альтернатива одна - Google web fonts Гугл предлагает сервис по работе со шрифтами.
Использовать Google web fonts очень просто. Кликаем Quick-use у понравившегося шрифта, в открывшейся вкладке находим такой код
<link href='http://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'>
Можно вставить его в хтмл-верх на страницу, а можно импортировать, как мы делали это раньше, используя ссылку (выделена жирным)
@import url(http://fonts.googleapis.com/css?family=Fjalla+One);
+ Не надо никуда ничего грузить и ничего писать - выбрал шрифт, добавил ссылку и готово.
- Шрифтов мало (на сейчас 613) и они в основном латиница.
О гадостях на последок...
Opera в некоторых случаях может не показывать на веб-странице текст выбранным шрифтом, заменяя его стандартным. Причём для локальных документов всё работает корректно. Это происходит в тех случаях, когда имя пользователя в Windows написано кириллицей. Причем неважно как Вы этот шрифт зададите - через @font-face или Google web fonts - работать не будет.
Отредактировано sadhaka (25.12.12 20:22)
