Css3 @fontface不支持Chrome 17和Firefox 10 [英] Css3 @fontface is not working with Chrome 17 and Firefox 10

问题描述

我试试这段代码对于阿拉伯字体的@fontface：

  @ font-face {
 font-family：'MothnnaFont'; 
 src：url（'fonts / mothnna.eot'）; / * IE9兼容模式* / 
 src：url（'fonts / mothnna.eot？#iefix'）format（'embedded-opentype'），/ * IE6-IE8 * / 
 url /mothnna.woff'）format（'woff'），/ * Modern Browsers * / 
 url（'fonts / mothnna.ttf'）format（'truetype'），/ * Safari，Android，iOS * / 
 url（'fonts / mothnna.svg＃svgMothnnaFont'）format（'svg'）; / *旧版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

以下是演示。顺便说一下，fontsquirrel也使用这个语法作为默认语法。

I'm trying this code For the @fontface for an arabic font :

@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 */
}

I'm using the font in a class named demo :

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

This code is working on ie but it's not working on firefox 10 or chrome 17

Here is a demo http://tmr.hyperphp.com/font/demo.html

Here is how the font should look like

So anybody can help me to make this font appear a cross all browsers ?

Solved: just downloaded the font and converted it again and it's all working now thank you all for helping

解决方案

This syntax of embedding web-fonts is not bulletproof anymore. Try using the Fontspring syntax instead:

@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');
}

It's just the first double appearance of the "src"-attribute you have to fix.

This will solve your problem.

For more information about the syntax, take a look at this source. And by the way, fontsquirrel is also using this syntax as its default.

这篇关于Css3 @fontface不支持Chrome 17和Firefox 10的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！