"Нестандартные шрифты на сайте" или "CSS свойство @font-face"

« Предыдущая запись
 
  Следующая запись »
 

fontface "Нестандартные шрифты на сайте" или "CSS свойство @font face" Очень часто в дизайн сайта гораздо лучше вписываются нестандартные шрифты, чем стандартные, но вылезать из-за рамок стандартов не хочется. Для вылаза из рамок существуют, конечно, специальные жабаскрипты, но этот вариант всяко уступает тому, которое уже заранее создано в спецификации CSS - свойство @font-face. И если раньше было трудно его использовать из-за слабой кроссбраузерности, то сейчас им дан зелёный свет. Итак…

 

  EOT TTF и OTF SVG WOFF
Internet Explorer IE5+ IE9 IE9
Google Chrome Chrome 4.0+ Chrome 0.3+ Chrome 5.0+
Mozilla Firefox Firefox 3.5+ Firefox 3.5 Firefox 3.6+
Apple Safari Safari 3.1+ Safari 3.1
Opera Opera 10+ Opera 9

В предлагаемой таблице указано какие шрифты какими версиями браузеров поддерживаются. Материалы взяты из интернета и дополнены собственными наблюдениями в виде указанных значков +. Для тестирования я использовал Chrome 8.0, Opera 11.01, Firefox 4.0b7, Safari 5.0.

С ишаком комментариев не надо – даём ему EOT и забываем о нём, также как и о том, что EOT больше никем не поддерживается. В хроме работают все шрифты, но раньше всех заработал SVG. А вот для огнелиса про SVG можно забыть, т.к. в четвёртой версии он не поддерживается. Впрочем, для Сафари и Оперы почти такая же история – в последних версиях поддержка SVG также убрана, а рабочим остался только TTF.

 

Использование

@font-face {
   font-family: 'ShuBlog Font';
   src: url('shublog.eot'); 
}
body { font-family: 'ShuBlog Font',Tahoma; }

Строки 1-4 – задаём шрифт, а в 5 строке его используем. Поподробнее глянем на 2-3 строки. Мы задаём шрифт только для ишака, а как задать шрифты для других браузеров? Рассмотрим пример.

@font-face {
   font-family: 'ShuBlog Font';
   src: url('shublog.eot');
   src: local('☺'),
        url('shublog.woff') format('woff'),
        url('shublog.ttf') format('truetype'),
        url('shublog') format('svg'); 
   font-weight: normal;
   font-style: normal;
}

Здесь необходимо сказать две вещи. Первое касательно src: если задаётся url, то, как можно догадаться, указывается путь до шрифта, а если задаётся local, то указывается название шрифта на локальной машине, который может быть уже есть у пользователя на компьютере. В предлагаемом примере это служит в роли хака для ишака. Второе, что я хотел сказать, так это то, что ишак не понимает строки, когда в них пишут format, он их просто игнорирует. В результате ишак считает первый шрифт eot, а остальное всё продинамит, а остальные браузеры дойдут до нужного им правила.

Последний вопрос, который может возникнуть, где достать все вариант одного и того же шрифта? Ответ прост. Умные люди уже позаботились создать сервис Белкошрифт, который сам создаёт все варианты шрифтов того, который вы ему подсунете.

UPD: Спасибо Алексу за полезную ссылку в виде аналога белкошрифта, у которого есть возможность юзать лицензионные шрифты - www.font2web.com.

 

Достоинства использования @font-face

Основные достоинства очевидны: сео, возможный поиск по тексту, работа с ним, не говоря уже о том, что можно работать с текстом как хочешь – line-height, letter-spacing, first-letter – всё это возможно.

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

 

Недостатки использования @font-face

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

 

 

И последнее. Для желающих есть сервис предпросмотра шрифтов от гугл (линк). Он позволяет не только просмотреть шрифт, но и задать ему всякие параметры.

Вот и всё на сегодня. Не забываем пользоваться font-face, так как вещь крайне полезная. Удачи!

,

1 звезда2 звезд3 звезд4 звезд5 звезд (голосов: 6, средний: 5.00 из 5)
Понравилась статья или журнал? Подписывайся на продолжение!
  1. Спасибо за статью. Как раз интересовался этим вопросом не так давно.
    Будем тестить, пробовать.

  2. Пожалуйста!
    Да, потестить стоит и уже действительно имеет смысл им пользоваться

  3. Опечатка в коде
    url(shublog.woff’) format(‘woff’)

  4. Большое спасибо, исправил!

  5. Добрый день.
    На своем сайте использую Tahoma.
    Соответственно столкнулся с проблемой – в ишаке Tahoma не отображается.
    Придется использовать Tahoma как нестандартный , по Вашим рекомендациям.
    Спасибо за четкий и грамотный обзор.

  6. http://www.fontsquirrel.com/fontface/generator попробовал сконвертировать tahoma.ttf в tahoma.eot – но не получилось, пишет что шрифт принадлежит Microsoft .
    Есть ли другие варианты получения tahoma.eot

  7. art с каких пор tahoma не поддерживается ишаком?
    Тут скорее всего проблема в вашем ишаке а не в шрифте.
    Вот список безопасных шрифтов для веб-разработки в котором и tahoma есть
    http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html
    Тем более сам в своих проектах часто использую тахому и никаких проблем не возникало.

  8. 2art, да, последуйте совету DarkRaveN и проверьте ишак – Тахома она вездесуща. Как вариант – в перечне шрифтов после Тахомы поставьте Вердану, чтобы за неналичием тахомы вердана шла. Они, конечно, разные, но он ближе всего к Тахоме из стандартных.

  9. Спасибо, походу это глюк моей винды, на другом компе проверил – все ок.

  10. Александр, проблема с кодировкой по ссылке “Нажмите для редактирования”))

  11. Ну оно и главное =)

    ммм, в модельном окне в мете не прописана кодировка – так что видимо от браузера пляшет (в хроме всё ок).

    спасибо за пометку, как-нибудь обязательно доберусь исправить!=)

  12. Большое спасибо)

  13. Ребята привет!
    Зашел на макбуке на свой сайт, поддержки шрифтов не наблюдается ((( Как решить данную проблему? Помогите! Везде все отлично, но на маке и на айфоне некатит (((

  14. Привет!
    Сори за задержку, хотел на маке проверить рецепт, но смогу только в понедельник-вторник. Можешь пока показать свой сайт?

  15. А всё уже разобрался =) мой косяк был =) Всё верно в статье =) Шрифт подключался локально, я у себя смотрю норм, челу звоню у него беда =)

  16. А вообще вот сайт – persidskaya.ru =) joomla, пока в процессе.

  17. ну ок, что всё ок =)
    а сайт надо доделать, ага ;)

  18. Большое Вам спасибо, но такой вопрос: а как определить какая лицензия у шрифта?:) заранее спасибо!

  19. Пожалуйста=)
    ну, можно на эту тему в нете пошарить. а ещё можно загрузить шрифт на тот сервис, что я указывал (белкошрифт) и если шрифт лицензирнован, то он не отконвертит его ни в какой другой =)

  20. Владимир
    20/02/2012 at 16:59 Постоянная ссылка Цитировать

    Скажите, а шрифт ChinaCyr это лицензионный или нет?

  21. Друзья!
    Если Белкошрифт блокирует шрифт, а вы все же хотите конвертировать его, то вам в помощь сервис – font2web.com (думаю можно добавить в пост как аналог)

    Пока работает и с лицензионными шрифтами =)

    (primdesign@yandex.ru)

  22. Александр Шуйский
    20/02/2012 at 17:08 Постоянная ссылка Цитировать

    2Алекс, спасибо за полезную ссылочку :)

  23. Всегда пожалуйста!
    Просто недавно столкнулся с такой проблемой:

    Компания купила лицензионный шрифт, и используют его в своем фирменном стиле, написание цен и прочего (компания по типу М-Видео), и я не мог внедрить его им на сайт. Увидев при генерации шрифта на fontsquirrel.com надпись – Your font added to blacklist я думал что пистец :) Так как всегда пользовался вашим постом для внедрения шрифтов, и опиралсятолько на него :) пришлось порыть интернет и воспользоваться найденным font2web сервисом :) он меня спас просто!

    Надеюсь что и я помог Вам :)

  24. Александр Шуйский
    20/02/2012 at 17:25 Постоянная ссылка Цитировать

    Да, у самого буквально пару раз было, когда облом со шрифтом проходил – пользовался просто аналогами. Было не критично, я и не парился. Но мало ли что в будущем будет :)
    Так что ещё раз спасибо за линк ;)

  25. Спасибо огромное. К стыду моему, раньше я почти не сталкивался с проблемой нестандартных шрифтов. Но тут, как выяснилось, был задействован Закон Сохранения Фигни* – я устроился на работу, где местный дизайнер, похоже, в принципе не приемлет шрифты из стандартного набора. Даже если шрифт из стандартного набора подходит она найдёт такой же нестандартный, но с какой нибудь завитушкой.

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

  26. Александр Шуйский
    18/06/2012 at 10:18 Постоянная ссылка Цитировать

    Всегда пожалуйста=)
    А закон сохранения фигни – это вещь!=)

  27. Такая проблема, может кто сталкивался, нужен шрифт Calibri, всегда пользовался fontsquirrel.com никогда проблем не было, но калибри требует лицензию, нашел альтернативу в font2web.com конвертнул все норм, все круто, когда клиент начал тестить в win xp оказалось что там шрифт отображаеться каким то дерганым! что делать?

  28. Александр Шуйский
    19/08/2012 at 9:47 Постоянная ссылка Цитировать

    да, есть такая проблема у второго сервиса. И спешу огорчить – так везде. Он существенно урезает качество шрифта, искажая его границы. Выхода в таком случае я практически не вижу, кроме как найти замену. Ещё есть сервис google.com/webfonts, но там кириллических шрифтов как-то очень мало.

  29. Андрей
    13/12/2012 at 10:19 Постоянная ссылка Цитировать

    font2wem.com супер сервис. справился с задачей лучше, чем fontsquirrel.com спасибо за статью автору и за сервис разработчику

  30. Андрей
    13/12/2012 at 15:18 Постоянная ссылка Цитировать

    мне только не понятно, как вычислить высоту блока после преобразования шрифта.
    есть блок:

    <div id="test">
    много текста в этом блоке
    </div>

    его высота с шрифтом по умолчанию будет равна height1.
    а после преобразования в нужный нам шрифт его высота будет height2.
    а скрипт alert($('#test').height()); выдаст результат height1, а нам нужен height2.
    как быть?

  31. Александр
    30/09/2013 at 15:06 Постоянная ссылка Цитировать

    Добрый день.
    Проблема вот какая: не получается сгенерировать шрифт Century Gothic
    После генерации загружается файл с ссылкой на платные сервисы.
    Кто может помочь?

    И еще вопрос: обязательно устанавливать шрифт всех разрешений? Почему бы не поставить просто TTF (он у меня имеется). Глядя на таблицу он везде поддерживается.

  32. Александр Шуйский
    30/09/2013 at 15:14 Постоянная ссылка Цитировать

    Здравствуйте!
    Только ТТФ плохо из-за 8 ишака, который ещё довольно обильно юзают, к сожалению.
    Если шрифт есть в гуглфонтс, то почему бы и не использовать.
    если его через фонтсквирел и гугл не замутить адекватно, то аналог лучше искать. Или тогда только ттф подгружать (раз он есть), но для 8 ишака просто поставить какой-то стандартный Эриал или Тахому.

  33. Александр
    30/09/2013 at 15:26 Постоянная ссылка Цитировать

    Если шрифт есть в гуглфонтс, то почему бы и не использовать.

    Я в этом не особо разбираюсь. Вот перешел по ссылке http://www.google.com/fonts слева вверху вбил century gothic. он выдал этот шрифт, при нажатии на название шрифта, гушл отправил меня на покупку. И еще не могу понять поддерживает ли он кириллицу. (у меня в ттф поддерживает)

  34. Александр Шуйский
    30/09/2013 at 15:29 Постоянная ссылка Цитировать

    Кириллица есть, но гуглфонт пишет до ссылки на него “This font family is not available on Google Fonts.” Так что через гуглфонтс его не встроить, увы.