Правило @font-face

Опубликовано: 15 июля 2015 Обновлено: 21 января 2022 2 комментария

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

Гарнитура определяет набор из одного или более шрифтов, каждый из которых состоит из символов, имеющих общие конструктивные особенности — вес, стиль, дизайн, начертание, плотность, размер, например, шрифты без засечек (или гротески), шрифты с засечками (антиква). Гарнитура состоит из набора знаков (цифры, буквы, знаки пунктуации, специальные символы, также может состоять из неалфавитных символов).

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

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

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

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

  • загрузить файл шрифта на сервер в нескольких форматах для поддержки всеми браузерами,
  • указать название шрифта, прописать ссылку на файл и задать описание шрифта,
  • добавить имя шрифта в свойство 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.

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

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

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

font-squirrel

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

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

Transfonter — быстрый и удобный генератор правила @font-face для веб-шрифтов.

Поделиться: