Здравствуйте дорогие друзья! В данном посте хотел бы разобрать такой немаловажный момент в верстке, как подключение нестандартных шрифтов. Считаю, что каждый верстальщик должен изыскать методы «борьбы» с нестандартными шрифтами, иначе полет фантазии дизайнера закончится на стандартных шрифтах. Нестандартные шрифты в макете PSD для меня всегда были проблемой: использовать картинки — не удобно и не качественно; использовать скрипты, подобные cufon не совсем подходящий вариант, некоторые моменты, указанные в документации у меня не работали да и вовсе я не хочу уже этим заморачиваться.
В последнее время я стал использовать подключение нестандартных шрифтов прямо из шаблона, используя css-правило — @font-face. Данный подход позволяет нам подгрузить шрифт прямо с шаблона сайта, если он не установлен в операционной системе пользователя.
Css-код будет иметь следующий код:
@font-face {
font-family: Arbat; /* имя шрифта для CSS правил */
src: local("Arbat"), /* проверка на наличие шрифта в ОС пользователя */
url(fonts/Arbat.ttf); /* если шрифт не найден браузером, то загружаем его по указанному пути */
}
[…]
h1 {
font-family: Arbat; /* Данное имя шрифта можно указать нужным элементам */
}
Все бы хорошо, только вот данное замечательное решение не кроссбраузерно, т.е. не все браузеры смогут правильно отобразить данный шрифт. Все дело в том, что не все браузеры понимают шрифты формата *.ttf.
Вот примерный список поддерживаемых форматов браузерами:
| Поддерживаемые браузеры | Формат |
| Internet Explorer 6+ | EOT |
| Mozilla Firefox 3.5+ Opera 10+ Chrome 4+ Safari 3.2+ Opera mobile 10+ iOS 4.2+ Android 2.2+ |
OTF и TTF |
| Opera 9+ Chrome 4+ Safari 3.2+ Opera mobile 10+ iOS Android 3 |
TTF и SVG |
| Internet Explorer 9 Firefox 3.6+ Opera 11+ Google Chrome 6+ Safari 5.1 Opera Mobile 11+ |
WOFF |
Такое обилие форматов обусловлено максимальной поддержкой всех браузеров. При этом, браузер загружает первый понятный ему из списка шрифт (при условии указания правильного формата). Форматы описываются в порядке увеличения веса. Но, не смотря на то, что формат «WOF» самый легкий, на первом месте стоит — «EOT». Это необходимо для избежания неккоретного отображения в IE 6-8.
Стоит ли указывать — format?
Декларация «format» необходима для того, чтобы браузер смог сразу определить для себя нужный ему формат. Т.е. при загрузке он всего лишь отбирает нужный и понятный ему формат из списка. Что будет если не указать format? Если у вас не указан формат, но при этом подключено более одного браузер их начнет грузить все подряд и перебирать в поиске нужный. Отсюда следует, что подключая более одного формата шрифтов, указание декларации «format» обязательно! Не забывайте, что на обработку тратиться определенное время, а здесь мы можем выиграть.
Для задействования всех форматов наш css-код примет следующий вид:
@font-face {
font-family: "Arbat";
src: url("fonts/Arbat.eot"); /* Для поддержки браузера IE6+ */
src: url("fonts/Arbat.eot?#iefix") format("embedded-opentype"), /* Хак корректного отображения шрифта в IE8 */
url("fonts/Arbat.woff") format("woff"), /* Для современных браузеров */
url("fonts/Arbat.ttf") format("truetype"),
url("fonts/Arbat.svg#arbat") format("svg");
font-weight: normal;
font-style: normal;
}
[…]
h1 {
font-family: Arbat; /* Данное имя шрифта можно указать нужным элементам */
}
Таким образом следует, что, в данном случае, в каталоге «fonts» должны храниться все, перечисленные выше форматы одного шрифта. А где их взять, если в нашей ОС установлен лишь формат — TTF? Для этого воспользуемся специальным сервисом преобразования форматов шрифтов — http://fontface.codeandmore.com. Все, что вам необходимо сделать это загрузить необходимый шрифт из нашей ОС, нажать на большую красную кнопочку «I want my @font-face kit! » и сервис в считанные секунды сгенерирует нам пакет шрифтов необходимых форматов.
Внимание! Данный сервис теперь платный. Сервис теперь доступен по подписке, правда цена символическая — 1 мес. — 3$.
Нам сразу же предлагают посмотреть демо, а также скачать архив со шрифтами и индексным файлом.
Распакуйте данный архив в какой либо каталог вашего шаблона, например, создав папку — fonts. Откройте любым текстовым редактором файл с расширением .html (в моем случае это файл arbat.html) и скопируйте оттуда правила font-face и вставьте их в свой файл стилей (только без тегов «<style></style>»).
Вот мой код:
@font-face {
font-family: ‘Arbat’;
src: url(‘arbat.eot’);
src: url(‘arbat.eot?#iefix’) format(’embedded-opentype’),
url(‘arbat.woff’) format(‘woff’),
url(‘arbat.ttf’) format(‘truetype’),
url(‘arbat.svg#arbat’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
Важно! Измените пути к файлам шрифтов на корректные, иначе ничего работать не будет!
Далее необходимому элементу мы прописываем в стилях имя шрифта:
h1 {font-family: Arbat; } /* В качестве примера я взял заголовок первого уровня */ Еще сервисы Font-Face
В качестве альтернативы могу также предложить бесплатные сервисы-генераторы font-face:
- http://www.fontsquirrel.com/tools/webfont-generator
- http://www.font2web.com
- http://everythingfonts.com/font-face
- http://onlinefontconverter.com
Они ни чуть не хуже выше предложенного. В них, думаю, сами разберетесь, там ничего сложного нет.
На последок я хотел бы отметить все преимущества и недостатки данного метода.
Преимущества:
- высокая скорость загрузки страницы, при любом количестве использования нестандартных шрифтов;
- гибкость в работе верстальщика, тексты можно изменять без всяких проблем;
- четкое отображение, ведь это текст, а не картинка или флеш, или еще что либо;
- довольно просто реализовать с учетом генерации необходимых форматов.
Недостатки:
- данный метод поддерживается не всеми браузерами, даже несмотря на то, что мы использовали различные форматы. Не забываем, что у каждого браузера может быть много версий;
- некоторые файлы шрифтов могут быть довольно таки тяжелыми и весить несколько мегабайт (хотя, это решаемо), а это может значительно повлиять на скорость загрузки страницы;
- пока шрифт подгружается пользователь хоть и на мгновение, но все же видит стандартный шрифт (здесь зависит от размера шрифта);
- могут появляться иногда незначительные баги — при наведении мышкой искажается цвет (Safari, Chrome, Opera);
- у шрифта может быть правообладатель, а в данном случае его легко будет украсть.
В общем решать вам каким из способов подключения нестандартных шрифтов вам использовать. Мне лично подходит данный вариант.
Ну вот и все, что я хотел сказать по поводу подключения нестандартных шрифтов. Жду реплики в комментариях. Всем удачи! Встретимся в следующих постах…
Загрузка...