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

23 июля 2010, 16:28 Павел Марковнин HTML и CSS рейтинг +32-

Кросс-браузерный @font-faceВсем привет!

Сейчас все больше разработчиков начинают внедрять собственные шрифты в дизайн сайтов. Весной я написал статью о том, как с помощью различных библиотек (JS, Flash) можно использовать сторонние шрифты на сайтах.

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

Введение

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

// Объявляем шрифт
@font-face {
font-family: 'Имя шрифта';
src: url('путь/до/него');
}

// Применяем шрифт
p {
font-family: 'Имя шрифта', Arial;
}

Здесь в src: url указывается путь до файла со шрифтом, в src: local — название шрифта на локальной машине на тот случай, если у юзера этот шрифт уже есть. Но, не все так просто, разным браузерам нужны разные форматы шрифтов.

Форматы шрифтов

Шрифты могут быть в форматах TTF, OTF, EOT, SVG и WOFF:

Как видим, у нас есть минимум четыре типа файлов, которые нужно подгружать.

Правильное использование

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

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

@font-face {
font-family: 'TheanoDidotRegular';
src: url('theanodidot-regular-webfont.eot');
src: local('☺'),
url('theanodidot-regular-webfont.woff') format('woff'),
url('theanodidot-regular-webfont.ttf') format('truetype'),
url('theanodidot-regular-webfont.svg#webfontE40g3tc3') format('svg');
font-weight: normal;
font-style: normal;
}

На этом все. Не злоупотребляйте различными шрифтами ;-)

Рекламное место, которое может стать вашим

Понравилась статья?

Тогда подпишись на обновления через RSS или воспользуйся
другими способами подписки.

Читать в Яндекс.Ленте Добавить в Google Добавить в Netvibes
  •  

Комментарии — 37

RSS
  • Аватарка
    23 июля в 16:37 spike
    > Не злоупотребляйте...

    Я даже больше скажу, буржуйские спецы говорят, что 2 разных шрифта на странице — более чем достаточно.
  • Аватарка
    23 июля в 17:35 Тёма
    "Шрифтовая белка" игнорирует кириллицу... Или все же можно как-то ее заставить?
  • Аватарка
    23 июля в 17:39 Тёма
    Нашел, извините :)
  • Аватарка
    23 июля в 19:02 ]]>Alex]]>
    Спасибо. Есть какие-то подводные камни использования font-face в сравнении с cufon? чем луше пользоваться? :)
  • Аватарка
    23 июля в 20:21 nikonor
    А нельзя ли указать еще ссылки на сервисы или софт, которые могут шрифты конвертировать
  • Аватарка
    23 июля в 20:32 ]]>Владимир котельников]]>
    Про Шрифтовую белку узнал давно. Но как не пытался, так и не смог придумать применение сей фичи...
  • Аватарка
    24 июля в 11:06 ]]>Denai]]>
    WOFF разве только огнелис понимает? вроде либо гуглохром либо опера ж научились их тоже юзать, не?
  • Аватарка
    24 июля в 16:06 Vavgust
    А вот как ttf в otf конвертировать? Белка такого не делает.
  • Аватарка
    24 июля в 19:13 Сергей
    local(`смайлик`) - тут я как понимаю можно любой символ использовать в кавычках?
  • Аватарка
    24 июля в 20:53 ZEEN
    В Опере всегда проблемы. Или русский язык глючит или вовсе ничего не работает
  • Аватарка
    26 июля в 10:31 Чистяков Денис
    @Alex
    Это принципиально другой подход сифон и другие JS / флеш вставщики это костыли, а это решение предлагаемое браузерами и W3C. На текущий момент, как было сказано правильно, его поддерживают ВСЕ современные браузеры, и даже многие устаревшие, IE поддерживает EOT'ы начиная с 4-ой версии.
    Из плюсов нет проблемы с выделением / копированием, и нет дополнительной нагрузки на клиенте, кроме загрузки нужного для браузера шрифтового файла, но это один раз, дальше из кеша.
    @ZEEN
    По поводу глюков с русским все просто, по умолчанию "белка" откидывает все кроме латинских букв, надо переходить в экспертные настройки и либо выбирать "Custom Subsetting..." и нужные шрифтовые группы, либо оставлять без "обрезания" и выбирать "No Subsetting", эти настройки делаются в группе: "Subsetting". Сам сначала не могу понять в чем проблема.
    По поводу примера с "TheanoDidotRegular" выложили бы куда-нить, что бы не искать / качать самим)
  • Аватарка
    26 июля в 12:44 Shustry
    Увы, продолжаю пользовацо "сифоном" ибо Опера с фонт-фэйс работает чуть лучше чем никак.
  • Аватарка
    26 июля в 13:26 ]]>Allods Online]]>
    Работает опера нормально с ним (во всяком случае свежие версии)
    У меня на сайте например шрифт моднявый именно так прилеплен
  • Аватарка
    26 июля в 18:40 Чистяков Денис
    @Shustry
    Присоединяюсь к Allods Online в опере работает с 10-ки это уже более чем, при том что любая открытая более младшая версия просится очень настойчиво обновится и сайт оперы намекает )
    На в крайнем случае если так требуется поддержка в более уставших браузерах, то для них через хаки / jQuery определение браузера и версии подключать сифон ;)
    Больше всего меня приятно удивил IE который конечно использует только свой проприетарный формат, но хотя бы может и умеет и уже давно )
  • Аватарка
    27 июля в 23:23 ]]>Саша Кириллов]]>
    @Vavgust
    Чтобы сконвертировать ttf в otf, нужно воспользоваться сервисом http://onlinefontconverter.com/

    Нажать skip login, а там уж разберетесь.
  • Аватарка
    28 июля в 4:08 mamasha
    Весной я написать статью
  • Аватарка
    28 июля в 4:10 Сергей
    Не работает отписка от комментариев.
  • Аватарка
    28 июля в 9:46 ]]>Алекс]]>
    Ну правильно нужно смотреть какой браузер.
  • Аватарка
    28 июля в 11:30 nikonor
    подтверждаю. не работает отписка
  • Аватарка
    28 июля в 19:44 Fruzenshtein
    РЕСПЕКТ! Хорошая статья, давно меня мурыжат заказчики такой мулькой, как СВОЙ ШРИФТ на сайте.
  • Аватарка
    29 июля в 11:49 ]]>shevgeny]]>
    С дебютом, конечно, поздравляю, но... об этих редакторах в сети столько написано, что Ваша статья - не новость. А вот первому комментатору, действительно, спасибо!
  • Аватарка
    4 августа в 21:33 ]]>Алксандр]]>
    Админы. Вы ушли в отпуск, редко статьи стали выпускать. А сайтец-то интересный, хотелось бы чаще на него заходить. Спасибо.
  • Аватарка
    12 августа в 18:59 ]]>Юра]]>
    Доброго времени суток всем.
    Люди кто знает, как на мозилле можно свой шрифт поставить?
  • Аватарка
    13 августа в 8:57 ]]>Максим]]>
    Я думаю использование разных шрифтов не очень хорошая идея IE 6 вообще тупит...
  • Аватарка
    17 августа в 12:20 ]]>Юлия]]>
    Огромное спасибо! Самая полезная статья из всех, что мне доводилось читать о внедрении веб-шрифтов.
  • Аватарка
    18 августа в 14:05 ]]>Jungle]]>
    А реально ли использовать шрифты, которых нет у потенциального посетителя сайта?
  • Аватарка
    18 августа в 14:08 ]]>Allods Online]]>
    Так о них же и речь
  • Аватарка
    20 августа в 18:50 ]]>Юра]]>
    Не работает отписка от комментариев.
  • Аватарка
    22 августа в 12:27 ]]>Олег]]>
    Все отлично работает во ВСЕХ браузерах.
    Только есть одна единственная проблема в виндоусе(в линуксе не смотрел, так как не держу такого добра)(в маке как всегда все великолепно): если не настроен ClearType шрифт отображается без сглаживания. А это серьезный недочет. Но все равно смотрю в сторону @font-face. ООоочень удобно, и главное - нативно!
    В случае, если надпись очень видная и ответственная, можно использовать Кюфон, если нет, и отсутствие сглаживаения(не во всех случаях) не критично, можно смело лепить @font-face.
  • Аватарка
    25 августа в 14:06 ]]>Junglers]]>
    Тупанул немного, не так вопрос задал, хотя уже отпала необходимость в ответе:))
  • Аватарка
    27 августа в 23:09 ]]>Ajpro]]>
    Ребят, только что протестировал. Во всех браузерах работает, даже в ИЕ6, но в последней Опере не хочет работать один пример: ни пример в статье, ни демо-версия с белки, ни сайт http://allodov.net/, автор которого утверждает, что все работает.
    Версия оперы: 10.61
  • Аватарка
    27 августа в 23:12 ]]>Ajpro]]>
    Возможно дело в версии Windows, у меня 7-ка.
  • Аватарка
    30 августа в 9:40 ]]>FatJoe]]>
    У меня работает.
  • Аватарка
    31 августа в 14:37 ]]>Налим]]>
    Все хорошо, но многие еще ie6 пользуюутся, для всех браузеров напряжно нормальное отображение делать, да и время занимает.
  • Аватарка
    1 сентября в 23:14 Евгений
    Я использую такую форму

     /* только для Internet Explorer */
    
    @font-face {
    	font-family: 'CenturyGothicRegular';
    	src: url('fonts/gothic-webfont.eot');
    
    	}
    	 
    	/* далее для всех остальных браузеров */
    	 @font-face {
    	  font-family: "Century Gothic";
    	  src: local("Century Gothic"),
    	       url(fonts/GOTHIC.TTF);
    	}
    	em {
    	    font-family: CenturyGothicRegular, "Century Gothic", arial;
    	    font-weight: normal;
    	}
    


    А конвектор на этом сайтике есть http://www.fontsquirrel.com/fontface/generator только в настройках поставьте галочку на Cyrillic
  • Аватарка
    3 сентября в 10:22 ]]>uainfo]]>
    что делать если в разных браузерах текс представляется по разному ?
  • Аватарка
    7 сентября в 16:13 Антон
    В Опере 10.61 не работают примеры :(
    Остальные браузеры отображают замечательно
  • Эл. почта (используется для Граватарки)
  • Домашняя страница
  • Имя в Твиттере
  • Разрешенные теги Текст сообщения (надо бы заполнить это поле)
  • как выглядит какой тег
    жирный текст <b>жирный текст</b>
    курсивный тект <i>курсивный тект</i>
    зачеркнутый текст <s>зачеркнутый текст</s>
    подчеркнутый текст <u>подчеркнутый текст</u>
    ссылка <a href="адрес">ссылка</a>
    function foo() { ... }
    <pre><code>function foo() { ... } </code></pre>