Янв
30
2013

Что такое @font-face и как его использовать в CSS

font-face

Что такое @font-face и как его использовать в CSS

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

Почему это круто?

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

Кроме того, @font-face не использует изображения для визуализации, а выводит настоящий текст, что благоприятно сказывается на SEO и доступности контента.

Как использовать @font-face

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

@font-face {
    font-family: DeliciousRoman;
    src: url('http://www.font-face.com/fonts/delicious/Delicious-Roman.otf');
}

Затем уже его можно использовать.

p {
    font-family: DeliciousRoman, Helvetica, Arial, sans-serif;
}

Вот и все!

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

@font-face {
    font-family: DeliciousRoman;
    src: url('.../Delicious-Roman.otf');
}

Кроме того, мы можем использовать и три других свойства шрифтов. Во-первых, это font-stretch, с помощью которого можно определить ширину начертания букв. Во-вторых, font-style, позволяющий определить наклонный шрифт или курсив. !!!!! Курсив и наклонный шрифт при всей их похожести не одно и то же. Курсив это специальный шрифт имитирующий рукописный, наклонный же образуется путем наклона обычных знаков вправо. И третье, это font-weight, определяющий насколько "толстым" должно быть начертание букв.

@font-face {
    font-family: DeliciousRoman;
    src: url('.../Delicious-Roman.otf');
    font-stretch: condensed;
    font-style: oblique;
    font-weight: bold;
}

Установка font-weight позволяет быть увереным, что шрифт будет именно нужной Вам толщины, а не на усмотрение браузера. У браузеров есть собственные взгляды на то, как должны выглядеть некоторые вещи. Кроме того, четко определив нужно начертание, Вам не придется его указывать во всех правилах, где используется этот шрифт.

Несколько советов

Используя @font-face все же не забывайте подстраховываться и указывать дополнительные, универсальные шрифты вроде Arial и Times New Roman, для рубленных шрифтов и шрифтов с засечками, соответственно. Конечно это не обязательно должны быть именно эти 2 шрифта, но подстраховаться стоит обязательно.

Рендеринг шрифтов вещь хитрая, особенно когда дело касается старых или мобильных браузеров. Всегда стоит проверять сайт на всех доступных устройствах. Чем быстрее Вы найдете проблему, тем лучше (быстрее решите :) ).

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

Кроссбраузерность @font-face

Не все браузеры поддерживают @font-face!

Сейчас @font-face поддерживают:

  • Firefox
  • Opera
  • Chrome
  • Safari
  • Internet Explorer 9

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

  • Internet Explorer: EOT
  • Mozilla browsers: OTF, TTF
  • Safari: OTF, TTF, SVG
  • Opera: OTF, TTF, SVG
  • Chrome: TTF, SVG

Правильный синтаксис @font-face

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

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

@font-face {
    font-family: 'Graublau Web';
    src: url('GraublauWeb.eot');
    src: local('?'),
        url("GraublauWeb.woff") format("woff"),
        url("GraublauWeb.otf") format("opentype"),
        url("GraublauWeb.svg#grablau") format("svg");

    font-weight: normal;
    font-style: normal;
}

Ресурсы по @font-face

Font Squirrel

Font Squirrel — это потрясающий сайт, с которым Вы просто обязаны ознакомиться. Если Вы не сделали этого ранее :) Font Squirrel предоставляет коллекцию качественных и бесплатных шрифтов для скачивания. И в дополнение ко всему, имеется @font-face kit и @font-face генератор. @font-face kit позволит Вам использовать все типы шрифтов для обеспечения поддержки любого браузера.

@font-face kit’ы

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

00000000

@font-face kit generator

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

00000001

Google Fonts

Google Fonts это API предоставляемое Google, где Вы можете выбрать из коллекции необходимый шрифт и использовать его на своем сайте. Все представленные шрифты бесплатны. Представленная коллекция довольно внушительная и содержит много хороших шрифтов. Вы можете выбирать столько шрифтов, сколько желаете. После выбора необходимых шрифтов, Вы получите код, который необходимо разместить на своем сайте. Google предоставляет выборе между тремя вариантами — подключить CSS через @import; подключить отдельный CSS в <head> или загрузить шрифт с помощью JS. После вставки полученного кода, Вам остается только обратиться к подключенному шрифту по имени, как в вышерасмотренном примере.

Google-F

Google Fonts это очень простой в обращении сервис. Есть еще одна полезная фишка Google Fonts: он показывает какое воздействие окажут выбранные Вами шрифты на скорость загрузки сайта.

TypeKit

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

typekit0

Не пропустите этот сервис, если цена для Вас не проблема. Так же они предоставляют возможность ознакомиться с их возможностями.

p

Похожие записи

Немного об авторе: Сергей Белянин

Основной автор этого блога. Еще совсем недавно студент, а сегодня уже Microsoft Certifed Professional, с неукротимым желанием сделать жизнь людей проще, автоматизировав скучную рутинную работу :)