"Нестандартные шрифты на сайте" или "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)
Понравилась статья или журнал? Подписывайся на продолжение!
Отзывов: 34 на запись

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

  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.” Так что через гуглфонтс его не встроить, увы.

Добро пожаловать, коллега! Вы можете оставить свой отзыв:





Допустимые XHTML-теги:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Подписка на комментарии