Mithgol Feb 4 2011 at 11:05

Новый пуленепробиваемый синтаксис @font-face

3 min

71K

Typography*

Tutorial

Translation

+123

Comments 42

Mithgol Feb 4 2011 at 11:08

Первым на Хабрахабре об этой находке сообщил ZaiSL, разместивший топик-ссылку во блоге «Каскадные Таблицы Стилей».

А здесь мною приводится перевод на русский язык той блогозаписи, на которую указывала эта ссылка.

AusTiN Feb 4 2011 at 14:20

во блоге

вы взорвали мой мозг :(

Awake Feb 4 2011 at 15:01

Хотел написать «Mithgol детектед», а потом присмотрелся, оказался и правда Мицгол.

KL7 Feb 5 2011 at 01:42

Ему не впервой, привыкайте. Хотя, признаться честно, «вебошрифты» и меня удивили =)

shevgeny Aug 11 2011 at 01:07

Вообще, так как «блог» — слово заимствованное, логично предположить, что к нему стоит применять общие правила, которые гласят об использовании предлога «во» вместо «в» перед словами, начинающимися с двух и более согласных. Так что, для взрыва мозга простым «во блоге» — причины отсутствуют.

AusTiN Aug 11 2011 at 10:34

Тем не менее, для русскоязычного Интернета более привычно словосочетание «в блоге»…

danko Feb 4 2011 at 23:25

А почему при переводе символ "?" превратился в "#"?

Mithgol Feb 4 2011 at 23:45

Автор первоисточника сегодня (4 февраля) внёс в него дополнения и изменения.

Я учёл их сейчас в своём переводе.

Благодарю за внимательность.

dudeonthehorse Feb 4 2011 at 11:24

Оперативно постите :)
Chrome 9 — всё гуд!

Shuichi Feb 4 2011 at 11:27

Гениально.

tibalt Feb 4 2011 at 11:31

уже появилось в опциях генератора fontsquirrel.com)

UFO just landed and posted this here

Mithgol Feb 4 2011 at 11:35

На белке-шрифтелке действуют так оперативно, что коллега наш flight даже сперва подумал было, что этот рецепт и раньше там был :-)

UFO just landed and posted this here

Mobyman Feb 4 2011 at 12:21

Воткните под кат пожалуйста статью.

Mithgol Feb 4 2011 at 12:28

Хорошо!

Воткнул.

Proway Feb 4 2011 at 12:32

И все-таки воткнули кат. Дождались публичного обращения. Приватной рекомендации вам было недостаточно.: )

Mithgol Feb 4 2011 at 12:43

Единственной рекомендации было недостаточно. Когда их набралось три, я решил последовать гласу народа.

Proway Feb 4 2011 at 12:47

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

Процитирую себя же в приватном обращении.

«И все же я считаю что пост, высота которого превышает его ширину больше чем в два раза (особенно при ширине монитора в 1024px), должен делиться на «до ката» и «после ката».»

Mithgol Feb 4 2011 at 12:26

От себя добавлю, что упомянутые автором первоисточника «жалобы на отказ шрифтов загружаться в Android», которые появляются в случае следования рецепту Пола Айриша, вызваны известным багом в браузерах Android 2.2 и Android 2.3: эти браузеры, оказывается, вообще не воспринимают указание «local('имя шрифта')» и игнорируют декларацию @font-face, его содержащую.

Пол Айриш приводит специальный код, которым можно обойти эту проблему, используя уточнитель «@media screen and (max-device-width: 480px)» и метаэлемент <meta name="viewport">. При этом, как и в рецепте «Mo' Bulletproofer», появляется необходимость двойной декларации; кроме того, сейчас есть устройства с Android, использующие более широкие экраны, чем 480px. Так что костыль этот кривой и негодный; а вот рецепт Fontspring лишён этих недостатков, так как «local(…)» в нём вовсе не требуется.

UFO just landed and posted this here

corbenov Feb 4 2011 at 18:12

У меня вопрос вообще насчёт использования @font-face:
лично я его пока не использую только потому что при загрузке мне не нравится что шрифт дергается
(то есть сначала показывается шрифт без применения стилей,
подгружается шрифт и только потом меняется внешний вид текста)

Теперь вопросы:
1) Как-то можно избежать этого дерганья?

2) Помогает ли от такого поведения использование кэшированных шрифтов от Гугла?
(а-ля fonts.googleapis.com/css?family=IM+Fell+English|Molengo|Reenie+Beanie)

3) Насколько распространено решение из пункта 2?
Я просто нигде не припомню чтобы такое видел.

s2erg Feb 5 2011 at 00:45

По поводу вопроса #2 Айриш предлагает решение:
paulirish.com/2009/fighting-the-font-face-fout/

s2erg Feb 5 2011 at 00:47

Прошу прощения, вопрос #1 (про «дёргание»)

ohsh Feb 6 2011 at 02:10

Про №1. В кеш лет на 10 все файлы из @font-face с отдачей верного type на сервере. Дернется всего один раз.

UshkiNaMakushke Feb 10 2012 at 23:17

лично у меня проблема дергания была решена, тем что шрифт был в base64

EvgeniyLazarev Feb 4 2011 at 20:09

Пост вдохнул веру в то, что всему своё время и место :) Здорово, что нашлось такое простое решение.

maxic Feb 5 2011 at 12:58

Кстати очень неплохая ссылка для тех кто пользуется «внешними» шрифтами:
http://www.fontsquirrel.com/fontface/generator

wazek Feb 6 2011 at 17:27

У этого способа есть недостатки: не работает в Опера (у меня). В ФФ и Хроме заметен процесс переключения шрифта.

Но я нашел решение:

/* для IE */
@font-face {
font-family: 'MyriadProLight';
src: url('fonts/myriadpro-light-webfont.eot?') format('embedded-opentype');
}
/* для не IE */
@font-face {
font-family: 'MyriadProLight';
src: url('fonts/myriadpro-light-webfont.svg#webfontOkKwgGFT') format('svg'), /* первым в списке для Opera */
url(data:font/woff;charset=utf-8;base64,...) format('woff'), /* подключаем через base64 для FireFox. В этом случае не заметен процесс подключения шрифта. */
url('fonts/myriadpro-light-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

Остается заметен процесс подключения шрифта в Хроме, но он не раздражает. И для меня остается загадкой почему Хром и ФФ загружают woff шрифт, а не svg, а Опера наоборот.

wazek Feb 6 2011 at 18:12

Chrome 9, как и Opera 11 загружает svg, FF 3.6 — woff. Перерисовка шрифта в Chrome почти не заметна.

wazek Feb 6 2011 at 18:59

В конце концов понял, что svg надо подключать перед truetype для Оперы.

UFO just landed and posted this here

Mithgol Feb 9 2011 at 10:38

Спасибо за прояснение обстоятельств дела.

Надеюсь, заинтересованные лица ужé передали разработчикам «Оперы» описание этой проблемы, надеясь на её исправление ими?

takobus Feb 24 2011 at 23:20

А у вас нормально отображаются шрифты на iPhone в Safari?
Делала свой пример, не заработало, думала, шрифт неправильно сгенерился (сама делала), но на сайте fontsquirrel.com тоже не отображаются.
iOS 4.0

takobus Feb 25 2011 at 00:41

Заработало. Почему-то неправильный font id был прописан в @font-face, шрифт и css генерился белкой. Может кому поможет, ответ нашелся в статье, там было разъяснение про хеш.

Allpa Apr 12 2011 at 05:28

Есть шрифт, кириллицу поддерживает. Но, когда я пытаюсь заюзать его с помощью @font-face, срабатывает только в том случае, если текст на латинице. Кириллицу тоись напрочь отказывается отображать :(
Вы не подскажете, в чём может быть дело?
Может быть, в конкретном шрифте?

UshkiNaMakushke Jan 26 2012 at 14:30

Люди, может быть я задам глупый вопрос, но я для себя не могу найти на него ответа.

С этими все понятно:

EOT — only supported by Internet Explorer
WOFF— Cross-browser, web-only font format that uses gzip compression. IE9+, FF3.6+, Chrome 5+
SVG — This is an XML format required by iOS devices before version 4.2.

НО!
за чем тогда подключать TTF, если и без него все хорошо работает, WOFF недостаточно??
Заранее спасибо за ответ.

Mithgol Feb 24 2012 at 05:27

Для старых версий браузеров, которые TTF ужé поддерживали, а WOFF ещё не поддерживали.

Mozilla Firefox 3.5 (поддержка WOFF появилась в версии 3.6).

Google Chrome 4 (поддержка WOFF появилась в версии 5).

Opera 10 и 11.0 (поддержка WOFF появилась в версии 11.1).

Safari 3.1 и 4 (поддержка WOFF появилась в версии 5.1).

UshkiNaMakushke Feb 24 2012 at 14:03

Спасибо)

tarantul85 May 24 2013 at 10:13

Отлично! Как раз в данный момент волновала эта тема. Вы сэкономили мне несколько часов.

GIum Jun 20 2013 at 23:18

В Ваше втором примере eot шрифт не прописан в data. Tо есть получается в IE8 шрифт через data никак не добавить?

Mithgol Oct 6 2016 at 21:01

Как гласит официальная документация от Корпорации Microsoft, IE8 не поддерживает data длиннее 32 768 символов. Если учесть ещё и избыточность base64-кодировки, то получится, что это вопиюще неподходящий способ подключения шрифтов в IE8 (разве что шрифт попадётся двадцатикилобайтовый или ещё того меньше).