Css3 @fontface无法与Chrome 17和Firefox 10配合使用

Question

我正在尝试这个代码用于@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

以下是字体的外观

所以任何人都可以帮助我让这个字体显示在所有浏览器中？

已解决：刚刚下载了该字体并再次转换，现在一切正常 谢谢大家的帮助

Answer 1

嵌入网络字体的这种语法不再是防弹的。 请尝试使用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”属性的第一个双重外观。

这将解决您的问题。

有关语法的更多信息，请查看此source。顺便说一下，fontsquirrel也使用这种语法作为默认语法。