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

Я пробую этот код для @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

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

введите здесь описание изображения

Итак, кто-нибудь может помочь мне заставить этот шрифт отображаться во всех браузерах?

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


css font-face
person Muhamad Bhaa Asfour    schedule 14.02.2012    source источник
comment
Возможно использование двух src:? Попробуйте , вместо ;src:.   -  person 0b10011    schedule 15.02.2012
comment
Пробовал, но не получилось   -  person Muhamad Bhaa Asfour    schedule 15.02.2012
comment
Вы уверены, что путь правильный? Все остальное вроде бы правильно.   -  person Alex Morales    schedule 15.02.2012
comment
Я знаю, что это основные вопросы, но есть ли у вас тип документа и правильно ли установлена ​​кодировка?   -  person Alex Morales    schedule 15.02.2012

Ответы (1)


arrow_upward
1
arrow_downward

Этот синтаксис встраивания веб-шрифтов больше не является пуленепробиваемым. Вместо этого попробуйте использовать синтаксис 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 также использует этот синтаксис по умолчанию.

person tobi.at    schedule 24.02.2012