Очень часто в дизайн сайта гораздо лучше вписываются нестандартные шрифты, чем стандартные, но вылезать из-за рамок стандартов не хочется. Для вылаза из рамок существуют, конечно, специальные жабаскрипты, но этот вариант всяко уступает тому, которое уже заранее создано в спецификации 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-family: 'ShuBlog Font';
src: url('shublog.eot');
}
body { font-family: 'ShuBlog Font',Tahoma; }
Строки 1-4 – задаём шрифт, а в 5 строке его используем. Поподробнее глянем на 2-3 строки. Мы задаём шрифт только для ишака, а как задать шрифты для других браузеров? Рассмотрим пример.
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: Спасибо Алексу за полезную ссылку в виде аналога белкошрифта, у которого есть возможность юзать лицензионные шрифты.
Достоинства использования @font-face
Основные достоинства очевидны: сео, возможный поиск по тексту, работа с ним, не говоря уже о том, что можно работать с текстом как хочешь – line-height, letter-spacing, first-letter – всё это возможно.
Второй, плюс для некоторых сайтов на иностранных языках, для которых большая проблема с общедоступными шрифтами. К примеру, в арабском языке при письме некоторые символы меняются в зависимости от того, какие символы являются соседними. Разные операционки используют различные алгоритмы отрисовки в таких случаях, а загружая при помощи font-face нужные шрифты, можно избежать проблемы неправильного отображения на различных машинах.
Недостатки использования @font-face
Не любой имеющийся у себя в коллекции шрифт можно у себя использовать. Почему? Лицензионное соглашение. Даже бесплатные не все шрифты можно использовать, так как некоторые из них выкладываются бесплатно в качестве рекламных продуктов, и их нельзя распространять и применять в общественных проектах, а именно сайтах. Так что перед тем как использовать те или иные шрифты, необходимо проверять их лицензии.
И последнее. Для желающих есть сервис предпросмотра шрифтов от гугл . Он позволяет не только просмотреть шрифт, но и задать ему всякие параметры.
Вот и всё на сегодня. Не забываем пользоваться font-face, так как вещь крайне полезная. Удачи!
(голосов: 6, средний: 5.00 из 5)Похожие записи:
Загрузка ...
05/02/2011 at 2:59 Постоянная ссылка Цитировать
Спасибо за статью. Как раз интересовался этим вопросом не так давно.
Будем тестить, пробовать.
05/02/2011 at 9:21 Постоянная ссылка Цитировать
Пожалуйста!
Да, потестить стоит и уже действительно имеет смысл им пользоваться
04/06/2011 at 11:04 Постоянная ссылка Цитировать
Опечатка в коде
url(shublog.woff’) format(‘woff’)
04/06/2011 at 11:34 Постоянная ссылка Цитировать
Большое спасибо, исправил!
01/08/2011 at 1:01 Постоянная ссылка Цитировать
Добрый день.
На своем сайте использую Tahoma.
Соответственно столкнулся с проблемой – в ишаке Tahoma не отображается.
Придется использовать Tahoma как нестандартный , по Вашим рекомендациям.
Спасибо за четкий и грамотный обзор.
01/08/2011 at 1:30 Постоянная ссылка Цитировать
попробовал сконвертировать tahoma.ttf в tahoma.eot – но не получилось, пишет что шрифт принадлежит Microsoft .
Есть ли другие варианты получения tahoma.eot
01/08/2011 at 21:20 Постоянная ссылка Цитировать
art с каких пор tahoma не поддерживается ишаком?
Тут скорее всего проблема в вашем ишаке а не в шрифте.
Вот список безопасных шрифтов для веб-разработки в котором и tahoma есть
Тем более сам в своих проектах часто использую тахому и никаких проблем не возникало.
03/08/2011 at 0:12 Постоянная ссылка Цитировать
2art, да, последуйте совету DarkRaveN и проверьте ишак – Тахома она вездесуща. Как вариант – в перечне шрифтов после Тахомы поставьте Вердану, чтобы за неналичием тахомы вердана шла. Они, конечно, разные, но он ближе всего к Тахоме из стандартных.
03/08/2011 at 0:27 Постоянная ссылка Цитировать
Спасибо, походу это глюк моей винды, на другом компе проверил – все ок.
03/08/2011 at 0:31 Постоянная ссылка Цитировать
Александр, проблема с кодировкой по ссылке “Нажмите для редактирования”))
03/08/2011 at 0:31 Постоянная ссылка Цитировать
Ну оно и главное =)
ммм, в модельном окне в мете не прописана кодировка – так что видимо от браузера пляшет (в хроме всё ок).
спасибо за пометку, как-нибудь обязательно доберусь исправить!=)
16/08/2011 at 11:19 Постоянная ссылка Цитировать
Большое спасибо)
19/10/2011 at 6:57 Постоянная ссылка Цитировать
Ребята привет!
Зашел на макбуке на свой сайт, поддержки шрифтов не наблюдается ((( Как решить данную проблему? Помогите! Везде все отлично, но на маке и на айфоне некатит (((
22/10/2011 at 12:03 Постоянная ссылка Цитировать
Привет!
Сори за задержку, хотел на маке проверить рецепт, но смогу только в понедельник-вторник. Можешь пока показать свой сайт?
22/10/2011 at 17:19 Постоянная ссылка Цитировать
А всё уже разобрался =) мой косяк был =) Всё верно в статье =) Шрифт подключался локально, я у себя смотрю норм, челу звоню у него беда =)
23/10/2011 at 18:02 Постоянная ссылка Цитировать
А вообще вот сайт – persidskaya.ru =) joomla, пока в процессе.
23/10/2011 at 18:11 Постоянная ссылка Цитировать
ну ок, что всё ок =)
а сайт надо доделать, ага
27/11/2011 at 7:20 Постоянная ссылка Цитировать
Большое Вам спасибо, но такой вопрос: а как определить какая лицензия у шрифта?:) заранее спасибо!
27/11/2011 at 9:24 Постоянная ссылка Цитировать
Пожалуйста=)
ну, можно на эту тему в нете пошарить. а ещё можно загрузить шрифт на тот сервис, что я указывал (белкошрифт) и если шрифт лицензирнован, то он не отконвертит его ни в какой другой =)
20/02/2012 at 16:59 Постоянная ссылка Цитировать
Скажите, а шрифт ChinaCyr это лицензионный или нет?
20/02/2012 at 17:02 Постоянная ссылка Цитировать
Друзья!
Если Белкошрифт блокирует шрифт, а вы все же хотите конвертировать его, то вам в помощь сервис – font2web.com (думаю можно добавить в пост как аналог)
Пока работает и с лицензионными шрифтами =)
(primdesign@yandex.ru)
20/02/2012 at 17:08 Постоянная ссылка Цитировать
2Алекс, спасибо за полезную ссылочку
20/02/2012 at 17:17 Постоянная ссылка Цитировать
Всегда пожалуйста!
Просто недавно столкнулся с такой проблемой:
Компания купила лицензионный шрифт, и используют его в своем фирменном стиле, написание цен и прочего (компания по типу М-Видео), и я не мог внедрить его им на сайт. Увидев при генерации шрифта на fontsquirrel.com надпись – Your font added to blacklist я думал что пистец
Так как всегда пользовался вашим постом для внедрения шрифтов, и опиралсятолько на него 
пришлось порыть интернет и воспользоваться найденным font2web сервисом 
он меня спас просто!
Надеюсь что и я помог Вам
20/02/2012 at 17:25 Постоянная ссылка Цитировать
Да, у самого буквально пару раз было, когда облом со шрифтом проходил – пользовался просто аналогами. Было не критично, я и не парился. Но мало ли что в будущем будет
Так что ещё раз спасибо за линк
17/06/2012 at 23:52 Постоянная ссылка Цитировать
Спасибо огромное. К стыду моему, раньше я почти не сталкивался с проблемой нестандартных шрифтов. Но тут, как выяснилось, был задействован Закон Сохранения Фигни* – я устроился на работу, где местный дизайнер, похоже, в принципе не приемлет шрифты из стандартного набора. Даже если шрифт из стандартного набора подходит она найдёт такой же нестандартный, но с какой нибудь завитушкой.
*Если долгое время в моей жизни не происходило никакой фигни, это не значит, что главный распределитель фигни, сидящий в уютном кресле и посмеивающийся над всеми нами, про меня позабыл. Та фигня, которая со мной не произошла, никуда не исчезает, она накапливается, а потом вываливается на голову в один присест.
(с) Р.Злотников
18/06/2012 at 10:18 Постоянная ссылка Цитировать
Всегда пожалуйста=)
А закон сохранения фигни – это вещь!=)
19/08/2012 at 9:39 Постоянная ссылка Цитировать
Такая проблема, может кто сталкивался, нужен шрифт Calibri, всегда пользовался fontsquirrel.com никогда проблем не было, но калибри требует лицензию, нашел альтернативу в font2web.com конвертнул все норм, все круто, когда клиент начал тестить в win xp оказалось что там шрифт отображаеться каким то дерганым! что делать?
19/08/2012 at 9:47 Постоянная ссылка Цитировать
да, есть такая проблема у второго сервиса. И спешу огорчить – так везде. Он существенно урезает качество шрифта, искажая его границы. Выхода в таком случае я практически не вижу, кроме как найти замену. Ещё есть сервис google.com/webfonts, но там кириллических шрифтов как-то очень мало.
13/12/2012 at 10:19 Постоянная ссылка Цитировать
font2wem.com супер сервис. справился с задачей лучше, чем fontsquirrel.com спасибо за статью автору и за сервис разработчику
13/12/2012 at 15:18 Постоянная ссылка Цитировать
мне только не понятно, как вычислить высоту блока после преобразования шрифта.
есть блок:
<div id="test">
много текста в этом блоке
</div>
его высота с шрифтом по умолчанию будет равна height1.
а после преобразования в нужный нам шрифт его высота будет height2.
а скрипт alert($('#test').height()); выдаст результат height1, а нам нужен height2.
как быть?
30/09/2013 at 15:06 Постоянная ссылка Цитировать
Добрый день.
Проблема вот какая: не получается сгенерировать шрифт Century Gothic
После генерации загружается файл с ссылкой на платные сервисы.
Кто может помочь?
И еще вопрос: обязательно устанавливать шрифт всех разрешений? Почему бы не поставить просто TTF (он у меня имеется). Глядя на таблицу он везде поддерживается.
30/09/2013 at 15:14 Постоянная ссылка Цитировать
Здравствуйте!
Только ТТФ плохо из-за 8 ишака, который ещё довольно обильно юзают, к сожалению.
Если шрифт есть в гуглфонтс, то почему бы и не использовать.
если его через фонтсквирел и гугл не замутить адекватно, то аналог лучше искать. Или тогда только ттф подгружать (раз он есть), но для 8 ишака просто поставить какой-то стандартный Эриал или Тахому.
30/09/2013 at 15:26 Постоянная ссылка Цитировать
Я в этом не особо разбираюсь. Вот перешел по ссылке слева вверху вбил century gothic. он выдал этот шрифт, при нажатии на название шрифта, гушл отправил меня на покупку. И еще не могу понять поддерживает ли он кириллицу. (у меня в ттф поддерживает)
30/09/2013 at 15:29 Постоянная ссылка Цитировать
Кириллица есть, но гуглфонт пишет до ссылки на него “This font family is not available on Google Fonts.” Так что через гуглфонтс его не встроить, увы.