Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 42
Первым на Хабрахабре об этой находке сообщил ZaiSL, разместивший топик-ссылку во блоге «Каскадные Таблицы Стилей».
А здесь мною приводится перевод на русский язык той блогозаписи, на которую указывала эта ссылка.
А здесь мною приводится перевод на русский язык той блогозаписи, на которую указывала эта ссылка.
во блогевы взорвали мой мозг :(
Хотел написать «Mithgol детектед», а потом присмотрелся, оказался и правда Мицгол.
Ему не впервой, привыкайте. Хотя, признаться честно, «вебошрифты» и меня удивили =)
Вообще, так как «блог» — слово заимствованное, логично предположить, что к нему стоит применять общие правила, которые гласят об использовании предлога «во» вместо «в» перед словами, начинающимися с двух и более согласных. Так что, для взрыва мозга простым «во блоге» — причины отсутствуют.
А почему при переводе символ "?" превратился в "#"?
Гениально.
уже появилось в опциях генератора fontsquirrel.com)
На белке-шрифтелке действуют так оперативно, что коллега наш flight даже сперва подумал было, что этот рецепт и раньше там был :-)
Воткните под кат пожалуйста статью.
Хорошо!
Воткнул.
Воткнул.
И все-таки воткнули кат. Дождались публичного обращения. Приватной рекомендации вам было недостаточно.: )
Единственной рекомендации было недостаточно. Когда их набралось три, я решил последовать гласу народа.
Следовать, в таких случаях, надо бы еще и простой логике, тогда не возникнет ни приватных обращений ни публичных, относящихся к оформлению материала.
Процитирую себя же в приватном обращении.
«И все же я считаю что пост, высота которого превышает его ширину больше чем в два раза (особенно при ширине монитора в 1024px), должен делиться на «до ката» и «после ката».»
Процитирую себя же в приватном обращении.
«И все же я считаю что пост, высота которого превышает его ширину больше чем в два раза (особенно при ширине монитора в 1024px), должен делиться на «до ката» и «после ката».»
От себя добавлю, что упомянутые автором первоисточника «жалобы на отказ шрифтов загружаться в 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(…)» в нём вовсе не требуется.
Пол Айриш приводит специальный код, которым можно обойти эту проблему, используя уточнитель «@media screen and
У меня вопрос вообще насчёт использования @font-face:
лично я его пока не использую только потому что при загрузке мне не нравится что шрифт дергается
(то есть сначала показывается шрифт без применения стилей,
подгружается шрифт и только потом меняется внешний вид текста)
Теперь вопросы:
1) Как-то можно избежать этого дерганья?
2) Помогает ли от такого поведения использование кэшированных шрифтов от Гугла?
(а-ля fonts.googleapis.com/css?family=IM+Fell+English|Molengo|Reenie+Beanie)
3) Насколько распространено решение из пункта 2?
Я просто нигде не припомню чтобы такое видел.
лично я его пока не использую только потому что при загрузке мне не нравится что шрифт дергается
(то есть сначала показывается шрифт без применения стилей,
подгружается шрифт и только потом меняется внешний вид текста)
Теперь вопросы:
1) Как-то можно избежать этого дерганья?
2) Помогает ли от такого поведения использование кэшированных шрифтов от Гугла?
(а-ля fonts.googleapis.com/css?family=IM+Fell+English|Molengo|Reenie+Beanie)
3) Насколько распространено решение из пункта 2?
Я просто нигде не припомню чтобы такое видел.
По поводу вопроса #2 Айриш предлагает решение:
paulirish.com/2009/fighting-the-font-face-fout/
paulirish.com/2009/fighting-the-font-face-fout/
Про №1. В кеш лет на 10 все файлы из @font-face с отдачей верного type на сервере. Дернется всего один раз.
лично у меня проблема дергания была решена, тем что шрифт был в base64
Пост вдохнул веру в то, что всему своё время и место :) Здорово, что нашлось такое простое решение.
Кстати очень неплохая ссылка для тех кто пользуется «внешними» шрифтами:
http://www.fontsquirrel.com/fontface/generator
http://www.fontsquirrel.com/fontface/generator
У этого способа есть недостатки: не работает в Опера (у меня). В ФФ и Хроме заметен процесс переключения шрифта.
Но я нашел решение:
/* для 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, а Опера наоборот.
Но я нашел решение:
/* для 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, а Опера наоборот.
А у вас нормально отображаются шрифты на iPhone в Safari?
Делала свой пример, не заработало, думала, шрифт неправильно сгенерился (сама делала), но на сайте fontsquirrel.com тоже не отображаются.
iOS 4.0
Делала свой пример, не заработало, думала, шрифт неправильно сгенерился (сама делала), но на сайте fontsquirrel.com тоже не отображаются.
iOS 4.0
Заработало. Почему-то неправильный font id был прописан в @font-face, шрифт и css генерился белкой. Может кому поможет, ответ нашелся в статье, там было разъяснение про хеш.
Есть шрифт, кириллицу поддерживает. Но, когда я пытаюсь заюзать его с помощью @font-face, срабатывает только в том случае, если текст на латинице. Кириллицу тоись напрочь отказывается отображать :(
Вы не подскажете, в чём может быть дело?
Может быть, в конкретном шрифте?
Вы не подскажете, в чём может быть дело?
Может быть, в конкретном шрифте?
Люди, может быть я задам глупый вопрос, но я для себя не могу найти на него ответа.
С этими все понятно:
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 недостаточно??
Заранее спасибо за ответ.
С этими все понятно:
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 недостаточно??
Заранее спасибо за ответ.
Для старых версий браузеров, которые 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).
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).
Отлично! Как раз в данный момент волновала эта тема. Вы сэкономили мне несколько часов.
В Ваше втором примере eot шрифт не прописан в data. Tо есть получается в IE8 шрифт через data никак не добавить?
Как гласит официальная документация от Корпорации Microsoft, IE8 не поддерживает data длиннее 32 768 символов. Если учесть ещё и избыточность base64-кодировки, то получится, что это вопиюще неподходящий способ подключения шрифтов в IE8 (разве что шрифт попадётся двадцатикилобайтовый или ещё того меньше).
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Новый пуленепробиваемый синтаксис @font-face