Font-Face: подключение нестандартных шрифтов

Font-Face: подключение нестандартных шрифтов

26 553 в Html5, Css3 32

Здравствуйте дорогие друзья! В данном посте хотел бы  разобрать такой немаловажный момент в верстке, как подключение нестандартных шрифтов. Считаю, что каждый верстальщик должен изыскать методы «борьбы» с нестандартными шрифтами, иначе полет фантазии дизайнера закончится на стандартных шрифтах. Нестандартные шрифты в макете 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$.

Fon-face kit generator. Font-Face: подключение нестандартных шрифтов

Нам сразу же предлагают посмотреть демо, а также скачать архив со шрифтами и индексным файлом.

 Fon-face kit generator. Font-Face: подключение нестандартных шрифтов

Распакуйте данный архив в какой либо каталог вашего шаблона, например, создав папку — 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:

Они ни чуть не хуже выше предложенного. В них, думаю, сами разберетесь, там ничего сложного нет.

На последок я хотел бы отметить все преимущества и недостатки данного метода.

Преимущества:

  • высокая скорость загрузки страницы, при любом количестве использования нестандартных шрифтов;
  • гибкость в работе верстальщика, тексты можно изменять без всяких проблем;
  • четкое отображение, ведь это текст, а не картинка или флеш, или еще что либо;
  • довольно просто реализовать с учетом генерации необходимых форматов.

Недостатки:

  • данный метод поддерживается не всеми браузерами, даже несмотря на то, что мы использовали различные форматы. Не забываем, что у каждого браузера может быть много версий;
  • некоторые файлы шрифтов могут быть довольно таки тяжелыми и весить несколько мегабайт (хотя, это решаемо), а это может значительно повлиять на скорость загрузки страницы;
  • пока шрифт подгружается пользователь хоть и на мгновение, но все же видит стандартный шрифт (здесь зависит от размера шрифта);
  • могут появляться иногда незначительные баги — при наведении мышкой искажается цвет (Safari, Chrome, Opera);
  • у шрифта может быть правообладатель, а в данном случае его легко будет украсть.

В общем решать вам каким из способов подключения нестандартных шрифтов вам использовать. Мне лично подходит данный вариант.

Ну вот и все, что я хотел сказать по поводу подключения нестандартных шрифтов. Жду реплики в комментариях. Всем удачи! Встретимся в следующих постах…

Оцените пост
Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5 (22 оценок, среднее: 2,18 из 5)
Загрузка...
Заур Магомедов
Заур Магомедов
Занимаюсь созданием сайтов с 2009 года. Постоянно обучаюсь и совершенствуюсь, шагая в ногу со временем. Владею такими навыками, как: Html5, Css3, JavaScript, Vue, Git, БЭМ, Gulp.
Другие материалы той же категории