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;
}

此代码可以在 ie 上运行，但不能在 firefox 10 或 chrome 17 上运行

这是一个演示http://tmr.hyperphp.com/font/demo.html http://tmr.hyperphp.com/font/demo.html

字体应该是这样的

那么有人可以帮助我让这种字体出现在所有浏览器上吗？

Solved:刚刚下载了字体并再次转换，现在一切正常 谢谢大家的帮助

这种嵌入网络字体的语法不再是万无一失的。 尝试使用 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 http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax。顺便说一句，fontsquirrel 也使用此语法作为默认语法。