Правило @font-face

font_face

Каждый веб-дизайнер мечтает о создании сайта с красивой типографикой. Но, к сожалению, браузеры поддерживают лишь несколько гарнитур, так называемых «безопасных для веб» шрифтов. В стандартный набор входят следующие шрифты: Arial, Verdana, Times, Georgia, Courier New и несколько других.

Гарнитура определяет набор из одного или более шрифтов, каждый из которых состоит из символов, имеющих общие конструктивные особенности — вес, стиль, дизайн, начертание, плотность, размер, например, шрифты без засечек (или гротески), шрифты с засечками (антиква). Гарнитура состоит из набора знаков (цифры, буквы, знаки пунктуации, специальные символы, также может состоять из неалфавитных символов).
Шрифт — это набор символов конкретного размера, веса и стиля. Например, шрифт Times New Roman стиль italic размера 16px — это один шрифт, а Times New Roman стиль italic размера 10px — это уже другой.

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

Правило @font-face нужно размещать перед всеми остальными правилами css, так как этот прием улучшит производительность страницы. Загружаемые шрифты можно помещать в специальную папку fonts, созданную на сервере.

Чтобы подключить шрифт с помощью правила @font-face, нужно:
1) загрузить файл шрифта на сервер в нескольких форматах для поддержки всеми браузерами,
2) указать название шрифта, прописать ссылку на файл и задать описание шрифта,
3) добавить имя шрифта в свойство font-family элемента, который будет отображаться данным шрифтом.

@font-face { 
    font-family: "WebFont";
    src: url(WebFont.eot?) format("eot"), /* IE8+, знак ? позволяет обойти баг в обработчике значения src */
         url(WebFont.woff) format("woff"), /* все современные браузеры, IE9+ */
         url(WebFont.ttf) format("truetype"); /* все современные браузеры */
}
p {font-family: "WebFont", Arial, sans-serif; }

Этот код говорит браузеру отображать текст внутри элемента <p>, используя шрифт WebFont. Если браузер по какой-либо причине не сможет загрузить данный шрифт, он выберет подходящий из списка шрифтов. Он перебирает их в указанном порядке до тех пор, пока не находит шрифт, который сможет успешно использовать.

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

@font-face { 
    font-family: "WebFont";
    src: url(WebFont.eot?) format("eot"), 
         url(WebFont.woff) format("woff"), 
         url(WebFont.ttf) format("truetype");
    font-weight: bold;
    font-style: italic;
}
@font-face { 
    font-family: "WebFont";
    src: url(WebFont.eot?) format("eot"), 
         url(WebFont.woff) format("woff"), 
         url(WebFont.ttf) format("truetype");
    font-weight: 400;
    font-style: normal;
}

В общем виде для шрифта можно задать следующие свойства:

@font-face {
  font-family: "FontName";
  src: url() format(" ");
  font-variant: ;
  font-stretch: ;
  font-weight: ;
  font-style: ;
} 

Если вы предполагаете, что на компьютере пользователя установлен данный шрифт и хотите, чтобы шрифт загружался только после проверки его наличия у пользователя, то можно воспользоваться значением local() для задания адреса:

@font-face { 
    font-family: "WebFont";
    src: local("WebFont"),
         url(WebFont.eot?) format("eot"), 
         url(WebFont.woff) format("woff"), 
         url(WebFont.ttf) format("truetype");
    font-weight: bold;
    font-style: italic;
}

Форматы веб-шрифтов

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

Формат WOFF (Web Open Font Format), открытый сетевой формат шрифта, разработанный в Mozilla. Технически WOFF нельзя назвать форматом шрифта, так как он представляет собой лишь оболочку с функцией сжатия. Формат сжимает шрифты в формате TTF/OTF для использования их в интернете. Также, WOFF позволяет добавлять к файлу метаданные, например, сведения о лицензии.

Форматы OTF/TTF (OpenType Font и TrueType Font) работают в большинстве браузеров. Оба формата распространяются свободно.

Формат EOT (Embedded Open Type) создан разработчиками Microsoft, представляет сжатую копию шрифта TTF, повторное использование которого запрещается технологиями DRM (Digital Rights Management, цифровое управление правами доступа). Поддерживается только в IE, начиная с 8-й версии.

SVG/SVGZ (Scalabe Vector Graphics) — тип файлов шрифтов, представляющий векторное начертание шрифта. Как правило, имеет меньшие размеры файлов, тем самым позволяя улучшить производительность на мобильных устройствах. Работает в Opera Mobile и iOS Safari.

Сложности использования встроенных шрифтов

1) Файлы шрифтов могут быть больших размеров, поэтому в некоторых случаях добавление @font-face замедляет загрузку страниц.
2) С некоторыми шрифтами связаны лицензионные ограничения, не допускающие бесплатного использования.
3) Некоторые шрифты просто плохо смотрятся на веб-страницах.

Полезные ресурсы

  • font-squirrel

    Font Squirrel — сервис, позволяющий конвертировать веб-шрифты разных форматов. Небольшой минус — высота некоторых символов после конвертации может различаться. Шрифт загружается на сервис по кнопке Upload Fonts.

    Подробнее

  • Webfont.ru — ресурс, содержащий коллекцию бесплатных шрифтов для сайтов. На сайте также есть форум, где можно задавать вопросы, касающиеся использования того или иного шрифта. В закладке «Полигон» вы сможете увидеть, как будет выглядеть текст, поиграв с размерами, задав для него тень и т.д.

    Подробнее