Кроссбраузерный @font-face и обзор font-face генераторов

Довольно часто в клиентской части кода требуется использовать не системные шрифты. Системными (или иначе безопасными шрифтами web-safe fonts) на сегодня являются шрифты установленные в операционной системе. К web-safe fonts относятся такие шрифты как: Arial, Helvetica, Tahoma, Trebushet MS, Verdana, Times New Roman и некоторые другие семейства шрифтов.

web-safe-fonts

Посмотреть полный список web-safe fonts можно на сайте http://www.cssfontstack.com/

Итак, вам присылают макет сайта, а там основным шрифтом заголовков взят Miryad Pro и задача поставлена таким образом, что на выходе шрифт должен отображаться 1 в 1 как на макете. Вы начинаете разбираться как же вам использовать этот шрифт в своей таблице стилей?

В классическом виде, в css, выбор семейства шрифта производится таким правилом

  1. H1{
  2. font-family: "Myriad Pro", Arial, Helvetica, sans-serif;
  3. }

И это правильно. Для тэга заголовка H1 вы задаете через значение свойства font-family гарнитуру шрифта, а через запятую перечисляя альтернативные гарнитуры, в том случае если той, которую вы подключаете не будет установлено в операционной системе пользователя.

А теперь давайте вернемся к гарнитуре Myriad Pro и разберемся что это такое.

Myriad — семейство шрифтов класса гуманистический гротеск, разработанное Робертом Слимбахом и Кэрол Туомбли для Adobe Systems.

Шрифты Myriad Pro устанавливаются на компьютер вместе с популярной программой просмотра файлов формата PDF Adobe Reader версий 7.0 и 8.x. Этим обусловлено их широкое распространение в последние годы.

Данный шрифт используется компанией Apple в выпускаемых устройствах.

Таким образом, данный шрифт будет установлен только на компьютерах выпускаемых компанией Apple или на компьютерах, на которых было установлено программное обеспечение от Apple вроде Photoshop или Adobe Reader, которое при установке также установит и эти шрифты.

А теперь давайте бегло прикинем сколько ваших пользователей пользуются программами Apple и софтом от Apple? Много, но не все. Я не рискну оценивать процент пользователей с установленным шрифтом Myriad Pro, просто скажу вам, что его нет в web safe-fonts и веб-безопасным этот шрифт не является.

Что же это означает на практике? На практике это означает то, что у тех пользователей, у которых шрифт семейства Myriad отсутствует в операционной системе, в браузере будет отображена сначала первая альтернатива, потом вторая альтернатива, а потом стандартный шрифт браузера типа sans-serif, в соответствии с нашими правилами.

Таким образом компьютеры операционной системы Windows без установленного программного обеспечения от Adobe просто отобразят все гарнитурой Arial. А это не есть хорошо.

И как же нам быть? Ведь у нас стоит условие сделать шрифт 1 в 1 как на макете! Спокойствие, только спокойствие!

Кроссбраузерный @font-face. Генераторы

У вас есть 2 варианта решить эту задачу.

Вариант первый, это воспользоваться сервисами вроде sIFR или cufon которые генерирует из шрифтов графику. Логика работы этих сервисов в том, что они преобразуют ваши шрифты в графику на лету и подставляют графику вместо шрифтов в указанных местах.

Разница между cIFR и cufon в том, что первый требует наличия Flash плагина, которого по-умолчанию нет в Apple устройствах. Поэтому лучше использовать второй вариант в виде cufon если вы решили действовать этим методом.

Я бы не рекомендовал использовать оба этих сервиса в том случае если вы хотите чтобы ваш текст индексировался поисковыми машинами. То есть если вам нужно заменить только заголовки на это еще можно пойти, но если задача заменить что-то большее, то лучше пренебречь и перейти к второму варианту.

Для Myriad Pro готовые решения в формате cufon можно взять по этой ссылке http://www.cufonfonts.com/ru/font/492/myriad-pro

Если же вы все же хотите воспользоваться cufon то можете взять на заметку эту статью о том как использовать экзотические шрифты на свое усмотрение, но я все же рекомендовал бы вам второй способ.

Вариант второй, преобразовать ваш шрифт с помощью конвертеров и сформировать кросс-браузерные правила @font-face

На стороне сервера происходит конвертация otf или ttf в шрифты следующих форматов

Web Open Font Format (WOFF) — формат сжатого шрифта OpenType или TrueType и полностью совпадает с оригиналом, что позволяет оставить неизменным механизм рендеринга

https://ru.wikipedia.org/wiki/Web_Open_Font_Format

Embedded OpenType (EOT, внедряемый OpenType) — компактный формат внедряемых в веб страницы OpenType шрифтов разработанный Microsoft. Файлы таких шрифтов обычно имеют расширение «.eot»

https://ru.wikipedia.org/wiki/Embedded_OpenType

SVG (от англ. Scalable Vector Graphics — масштабируемая векторная графика) — язык разметки масштабируемой векторной графики, созданный Консорциумом Всемирной паутины (W3C) и входящий в подмножество расширяемого языка разметки XML, предназначен для описания двумерной векторной и смешанной векторно/растровой графики в формате XML.

https://ru.wikipedia.org/wiki/SVG

Вот несколько популярных сервисов которые позволят вам конвертировать ваш ttf или otf шрифт в форматы eot, woff и svg, что делает возможным кросс-браузерную генерацию css кода @font-face

Вы также можете ознакомиться со статьей 19 самых используемых font-face генераторов для конвертации шрифтов для web-safe и попробовать другие варианты, но там преимущественно платные зарубежные решения.

Наиболее популярным решением является конвертер http://www.fontsquirrel.com/tools/webfont-generator но в случае с гарнитурой Myriad Pro этот популярный конвертер не справляется.

В момент преобразования вы встретите следующую ошибку

fontsquirel

Поэтому для конвертации воспользуемся любым другим конвертером, я выбрал http://everythingfonts.com/font-face

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

generate-safe-fonts

После генерации вам будет предложено скачать архив с конвертированными шрифтами в соответствующих форматах и код для вставки в css

  1. @font-face {
  2. font-family: 'MyriadProCondensed';
  3. src: url('myriadpro-cond.eot');
  4. src: url('myriadpro-cond.eot') format('embedded-opentype'),
  5. url('myriadpro-cond.woff') format('woff'),
  6. url('myriadpro-cond.ttf') format('truetype'),
  7. url('myriadpro-cond.svg#MyriadProCondensed') format('svg');
  8. }

Часто, в русскоязычных блогах и сообществах можно встретить добавление следующего кода src: local('☺') это один из хаков, который уменьшает возможность загрузки шрифта из локальной Library на Mac устройствах.

Подробнее http://stackoverflow.com/questions/3698319/css-font-face-what-does-src-local%E2%98%BA-mean

  1. @font-face {
  2. font-family: 'MyriadProCondensed';
  3. src: url('myriadpro-cond.eot');
  4. src: url('myriadpro-cond.eot') format('embedded-opentype'),
  5. src local('☺'),
  6. url('myriadpro-cond.woff') format('woff'),
  7. url('myriadpro-cond.ttf') format('truetype'),
  8. url('myriadpro-cond.svg#MyriadProCondensed') format('svg');
  9. }

 

В результате вы получаете решение, работающее в следующих браузерах. И это не графика, а шрифты, что не может не радовать! :-)

Internet Explorer(all) Safari(3.2+) iPhone(3.1) Chrome(all) Firefox(3.5+) Opera
EOT TTF / OTF SVG SVG / TTF / OTF TTF / OTF / WOFF TTF / OTF