Jump to content
  • 0

Проблема с @font-face


Chervontsev
 Share

Question

Добрый день

Вроде как много где пишут, про использование любых шрифтов через стиль @font-face. Но вот чего-то в Opera 9, 10 не работает

Может я делаю что-то не так?

@font-face {
font-family: "Vesna";
src: url(../font/Vesna.eot); /* for IE6-8 */
src: local("Vesna"), url(../font/Vesna.ttf) format("truetype"); /* for Firefox 3, Safari */
}
html, body {
font:normal 23px "Vesna";
}

Вот сайт: Посетить мою домашнюю страницу

Edited by Chervontsev
Link to comment
Share on other sites

  • Answers 51
  • Created
  • Last Reply

Top Posters For This Question

Recommended Posts

  • 0
Проблема решается включением на сервере файлов .svg c mime типом font/svg+xml

Скажите плз поподробнее как включить svg сервере.

У меня проблема тоже с Оперой 10.60

Шрифт сгенерирован в http://www.fontsquirrel.com/fontface/generator

@font-face {
font-family: 'MyriadProBoldCondensed';
src: url('font/myriadpro-boldcond-webfont.eot');
src: local(''),
url('font/myriadpro-boldcond-webfont.woff') format('woff'),
url('font/myriadpro-boldcond-webfont.ttf') format('truetype'),
url('font/myriadpro-boldcond-webfont.svg#webfontR5dsJ540') format('svg'),
url('font/myriadpro-boldcond-webfont.otf') format('opentype');
font-weight: normal;
font-style: normal;
}

и везде отображается кроме Оперы...

http://aaiirriiss.ru/pr_verstki/kafe/font/demo.html

так же из инета скаченный пример

http://aaiirriiss.ru/font-face-ili-nazad-v...hhee/index.html

он работает и в опере, но в чем разница его кода и моего я понять не могу:)

Link to comment
Share on other sites

  • 0

Хорошие люди сделали Шрифтовую белку, заходите загружаете шрифт, ставите галочку напротив "Yes, the fonts I'm uploading are legally eligible for web embedding.", скачиваете архив с файлами шрифтов и примером, копируете файлы и код куда нужно и все работает кроссбраузерно

Link to comment
Share on other sites

  • 0

народ, не могу найти ничего по этому вопросу. сам третий день пытаюсь научить оперу этому делу... локальный файл нормально отображается(только если в пути нет кириллицы) а с сервака не хочет никак... я и mime-типы прописывал все, серавно все колом... блин, ненавижу оперу! хотя сам ща на ней сижу ))

опера 10.6

Link to comment
Share on other sites

  • 0

да, Vlad, проблема только с оперой (v10.62, winXP). До проблемы стояла 10.5, столкнулся с проблемой, обновил - проблема осталась.

Все примеры которые нашел в сети, все что используют font-face - не работают. Помню раньше баловался этой директивой (или что это - не знаю), в опере 9с чемто работало нормально. В инете инфы нет толком, вот только у вас на форуме нашел обсуждение темы.

Интересует от чего зависит работоспособность font-face'а в опере, и много ли опер не будут мой font'face отображать. Может гдето есть инфа от производителя оперы чтоли..

Главное в локальном файле работает, правда в пути не должно быть кириллицы, или мож какое другое ограничение, главное что D:\index.html работает.

И то, если font-family: 'My Font Family' прописано не в css файле а в index.html то при рефреше страницы шрифт пропадает.

Возился с денвером, настроил Content-type следующим образом:

AddType application/x-font-truetype .ttf

#AddType font/truetype .ttf

AddType font/svg-xml .svg

В firebug смотрел, заголовок Content-type становится правильным. Но опера всеравно не захавывает шрифт. В dragonfly видно что она даже не запрашивает его с сервера. ИИИзредка после изменения css-файла мелькал запрос то .eot файла, то .ttf но шрифт всеравно не отображался. если есть какаянить инфа, прошу поделиться...

Link to comment
Share on other sites

  • 0

Похоже какой-то баг в Опере. Вот пример прямиком "от создателей Оперы". Работает в 10.60 криво.

http://devfiles.myopera.com/articles/695/webfonts.html

Вот ссылка на этот пример и описание работы. Ничего нового.

http://dev.opera.com/articles/view/standar...ta-ru/#webfonts

Пока не удалось на сайте Оперы найти что есть такая проблема. Похоже они до сих пор считают, что со шрифтами все хорошо.

Link to comment
Share on other sites

  • 0
Им в блоге про шрифты писали ещё с первых бэт 10.50. 0 внимания.

Да им плевать на вашу писанину, не тратьте время. У них баги не исправлены ещё с 9 версии, а вы хотите, чтобы новые правили. Забудьте.

Link to comment
Share on other sites

  • 0

Да. так и есть - пример не работает ((

Причем если сохранить страницу на диск, и отдельно сохранить файл шрифта и положить рядом - пример работает - все здорово, а вот с сервера не хотит (((

Ща глянул статистику http://www.liveinternet.ru/stat/ru/browsers.html - оперы 10 не менее 20%.. циферка большая, придется отказаться от @font-face в пользу cufon'а, что опять же сужает сферу применения кастомного шрифта. Или как вариант - куфонить шрифт только в опере. Вот уж не думал что придется такие костыли для оперы делать....

Link to comment
Share on other sites

  • 0

Мда. SVG шрифты в опере крайне косячные, вернул как было и... заработало.

Я в этом мире ничего не понимаю.

@font-face {
font-family: 'ParisianNormal';
src: url('../fonts/parisian-webfont.eot');
src: local('Parisian'), local('ParisianNormal'),
url('../fonts/parisian-webfont.woff') format('woff'),
url('../fonts/parisian-webfont.ttf') format('truetype'),
url('../fonts/parisian-webfont.svg#webfontGlHiL3hu') format('svg');
font-weight: normal;
font-style: normal;
}

Opera 10.62, Windows 7.

Link to comment
Share on other sites

  • 0

Люди, козните меня пожалуйста (((

На самого себя рука не подымается...

Все работает путем(ну может и не совсем) - но нужно ОТКЛЮЧИТЬ ТУРБОЯДЕРНЫЙ РЕЖИМ !!!!

так как сижу на gprs-модеме, то этот режимчик сдорово выручает. Но вот в тестах с @font-face я о нем тупо забыл (((

Так чё, жисть теперь снова стала красочной !

Link to comment
Share on other sites

  • 0
Он тут не причем.

Я им не пользовался однакож проблема есть.

Да, погорячился я. Проблема есть. Но добиться отображения в опере можно. Косяк в том что она понимает только svg-шрифт, но не каждый такой шрифт в ней корректно отображается.

Прикол в том что опера таки понимает форматы ttf и otf, но только если открывать страницу как локальный файл(file://), а вот с сервера не хочет...

С svg во-первых косяк они плохо отображаются, во-вторых, некоторые вообще конкретно глючат - слова обрезаются наполовину, при этом тот же google chrome отображает данный шрифт нормально. Или тот же шрифт, но в ttf опера тоже отображает нормально ( но только по протоколу file:// )

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

Link to comment
Share on other sites

  • 0

Чтобы темы не плодить, отпишусь здесь.

Для подгрузки шрифтов есть хорошее средство в виде @font-face, которое, к сожалению, не поддерживается в Opera младше версии 10 и в Firefox младше версии 3.5.

Есть ли какой аналог @font-face для Opera 9.5 и Firefox 3.0, чтобы можно было подгрузить SVG-файл шрифта (помимо использования Cufon для отображения нужного шрифта)?

Link to comment
Share on other sites

  • 0

А вот ещё вопрос. У меня в @font-face указана подгрузка EOT и TTF файлов шрифта. Есть ли смысл использовать дополнительно WOFF и SVG файлы шрифтов, если OET и TTF нормально используются браузерами Safari 4+, Chrome 7+, IE6+, Opera 10.5+, Firefox 3.5+?

Edited by sifilis
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share


×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy