@font-face: руководство к действию

До недавнего времени веб-дизайнерам приходилось использовать только безопасные, т.е. широко распространенные шрифты: Arial, Georgia, Tahoma. Естественно, они не всегда отвечали задачам, стоящим перед разработчиком. С появлением современных технологий, необходимость в использовании безопасных шрифтов резко сократилась, если не отпала вовсе.

Не смотря на то, что каждый браузер имеет свои представления, о правильном отображении шрифтов, CSS3 успешно борется с этими недостатками, предоставляя возможность использовать нестандартные шрифты на сайтах и блогах при помощи свойства @font-face. Это руководство научит вас с легкостью применять кроссбраузерный @font-face в своей работе, а так же поможет избежать распространенных ошибок и сделать ваши сайты по настоящему красивыми.

Основы синтаксиса

Технология использования css свойства настолько проста, что даже новичок разберется, что к чему.

Давайте рассмотрим с вами пример того, как можно подключить на свой сайт нестандартный шрифт, на основе бесплатного шрифта Prosto.

Скачайте его и поместите в папку fonts вашего сайта, (если такой папки нет, создайте ее). Теперь перейдите в файл стилей (как правило, это style.css) и пропишите туда следующий код:

@font-face { font-family: prosto; src: url('fonts/prosto.ttf');}

Определение font-family задает идентификатор для нашего шрифта, src содержит ссылку на него. В принципе, вы можете поместить шрифт прямо в корневой каталог сайта. Тогда ваш url будет выглядеть так: url(‘prosto.ttf’). Что бы не создавать путаницы,  в качестве имени файла лучше использовать название шрифта.

Теперь вы можете использовать этот шрифт в любом месте сайта. Назначьте его стилю, в этом и любом следующем файле CSS, при помощи правила font-family:

font-family: Prosto, Arial, Verdana;

На всякий случай, после этого шрифта, задайте несколько безопасных, как показано выше. Теперь, при проблемах с открытием файла «prosto.ttf», браузер использует Arial.

После установки, проверьте свой сайт на работоспособность, текст должен выделяться/копироваться/вставляться.

Совместимость с различными браузерами

К сожалению, браузеры имеют не только разные представления об отображении шрифтов, но и, поддерживают разные форматы.

  • Internet Explorer поддерживает только EOT
  • Mozilla поддерживает OTF и TTF
  • Safari и Опера поддерживают OTF, TTF и SVG
  • Chrome поддерживает TTF и SVG.

Поэтому, что бы сделать @font-face кроссбраузерным, прийдется подгрузить шрифт в нескольких форматах.

Поместите шрифт в разных форматах в папку fonts. В файле стилей пропишите следующее:

@font-face { 
  font-family: 'ProstoFamily;
  src: url('fonts/prosto.eot);
  src: local('?'), 
      url('fonts/prosto.woff') format('woff'),
      url('fonts/prosto.ttf') format('truetype'),
      url('fonts/prosto.svg#webfont') format('svg');
  font-weight: normal;
  font-style: normal;}

Первой строчкой кода, мы объявляем идентификатор. Затем указываем ссылку на сам шрифт в формате EOT, для Internet Explorer. SRC: local — это своеобразный хак, который дает браузеру вымышленное имя, что бы появилась возможность загрузить несколько форматов сразу и не происходило путаницы.

Так же, для шрифта следует указать параметры font-weight и font-style, что бы в дальнейшем, можно было задать ему такие свойства, как курсив и насыщенность.

ОБЯЗАТЕЛЬНО проверяйте работоспособность шрифта в разных браузерах, что бы вовремя найти и устранить баги.

Как получить шрифт в разных форматах?

Вы, наверное, заметили, что кроссбраузеный @font-face зависит от нескольких форматов шрифтов. Многие из сайтов, предоставляющих бесплатные и платные шрифты, располагают только одним вариантом. Так, где же взять остальные?

Если у вас есть шрифт и вы хотите использовать его на сайте, для начала убедитесь, что он бесплатный, или у вас есть право на его использование. Затем перейдите на сайт fontsquirrel.com.

Здесь вам предлагается загрузить шрифт, нажав на кнопку Add Fonts, после чего вы должны выбрать способ преобразования:

  • Basic — шрифт конвертируется с минимальной оптимизацией.
  • Optimal — при выборе этой опции, шрифт конвертируется и оптимизируется самым оптимальным образом.
  • Expert — вы сами выбираете параметры конвертирования и оптимизации шрифта.


Далее необходимо согласиться с тем, что вам не запрещено использовать его и вы делаете это абсолютно легально. После того, как вы поставите галочку — появится кнопка download your kit — нажав на которую вы сможете скачать загруженный шрифт во всех необходимых форматах.

Сервис является абсолютно бесплатным и вы можете использовать его бесконечное количество раз…

Google Font API

Помимо @font-face существует сервис от Google, который называется Google Font API. Он так же помогает использовать нестандартные шрифты на сайте.

Для того, что бы вставить шрифт себе на сайт, необходимо перейти по ссылке на главную страницу Google Fonts.

В левой колонке в меню Scripts установите кириллические шрифты, и из представленного списка выбирайте подходящий. Можете добавить несколько шрифтов в коллекцию и скачать все разом. А если не терпится начать использовать, нажмите Quick-use рядом с примером понравившегося шрифта. В открывшемся окне инструкция по установке, состоящая всего из 4 коротких пунктов. В результате войны корпораций Google и Microsoft, вам придется сплясать с бубном, как описано выше, сделав конвертацию и настройку этого шрифта для Internet Explorer.

Метки: , , ,    Опубликовано в Дизайн сайтов

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*