Css3 @fontface не работает с Chrome 17 и Firefox 10 - PullRequest
Новая
       7

Css3 @fontface не работает с Chrome 17 и Firefox 10

3 голосов
/ 14 февраля 2012

Я пытаюсь этот код Для @fontface для арабского шрифта: 

@font-face {
font-family: 'MothnnaFont';
src: url('fonts/mothnna.eot'); /* IE9 Compat Modes */
src: url('fonts/mothnna.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('fonts/mothnna.woff') format('woff'), /* Modern Browsers */
    url('fonts/mothnna.ttf')  format('truetype'), /* Safari, Android, iOS */
    url('fonts/mothnna.svg#svgMothnnaFont') format('svg'); /* Legacy iOS */
}

Я использую шрифт в классе с именем demo: 

.demo
{
    font-family:'MothnnaFont',Sans-Serif;
    width:800px;
    margin:10px auto;
    text-align:center;
    border:1px solid #666;
    padding:10px;
    direction: rtl;
}

Этот кодработает, то есть, но не работает на Firefox 10 или Chrome 17

Вот демо http://tmr.hyperphp.com/font/demo.html

Вот как должен выглядеть шрифт

enter image description here

Кто-нибудь может помочь мне сделать этот шрифт похожим на все браузеры?

Решено: Просто скачал и преобразовал его снова, и теперь все работает, спасибо.все за помощь

1 Ответ

1 голос
/ 24 февраля 2012

Этот синтаксис встраивания веб-шрифтов больше не является пуленепробиваемым. Попробуйте вместо этого использовать синтаксис Fontspring: 

@font-face {
    font-family: 'MothnnaFont';
    src: url('fonts/mothnna.eot?#iefix') format('embedded-opentype'),
         url('fonts/mothnna.woff') format('woff'),
         url('fonts/mothnna.ttf')  format('truetype'),
         url('fonts/mothnna.svg#svgMothnnaFont') format('svg');
}

Это просто первое двойное появление атрибута "src", которое вы должны исправить.

Это решит вашу проблему.

Для получения дополнительной информации о синтаксисе взгляните на этот источник . И, кстати, fontsquirrel также использует этот синтаксис по умолчанию.

...