font-face 在 Chrome 中工作，但在 Firefox 或 IE 中不工作答案

【问题标题】：font-face working in Chrome but not in Firefox or IEfont-face 在 Chrome 中工作，但在 Firefox 或 IE 中不工作
【发布时间】：2014-01-16 02:22:40
【问题描述】：

使用此字体 css 文件为我们提供网站，由于某种原因，正确的字体仅在 Chrome 中显示，而不在 Firefox 或 IE 上显示-

谁能帮助我们找出问题所在以及我们如何解决这个问题？

谢谢

/*Museo Sans 100*/
@font-face {
    font-family: 'museo_sans';
    src: url('http://xxx.domain.com/fonts/museosans-100-webfont.eot');
    src: url('http://xxx.domain.com/fonts/museosans-100-webfont.svg#museo_sans100') format('svg'),
         url('http://xxx.domain.com/fonts/museosans-100-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://xxx.domain.com/fonts/museosans-100-webfont.woff') format('woff'),
         url('http://xxx.domain.com/fonts/museosans-100-webfont.ttf') format('truetype');

    font-weight: normal;
    font-style: normal;

}
/*Museo Sans 300*/
@font-face {
    font-family: 'museo_sans';
    src: url('http://xxx.domain.com/fonts/museosans-300.eot');
    src: url('http://xxx.domain.com/fonts/museosans-300.svg#museo_sans300') format('svg'),
         url('http://xxx.domain.com/fonts/museosans-300.eot?#iefix') format('embedded-opentype'),
         url('http://xxx.domain.com/fonts/museosans-300.woff') format('woff'),
         url('http://xxx.domain.com/fonts/museosans-300.ttf') format('truetype');

    font-weight: normal;
    font-style: normal;

}
 /*Museo Sans 700 italic*/
@font-face {
    font-family: 'museo_sans';
    src: url('http://xxx.domain.com/fonts/museosans-700italic-webfont.eot');
    src: url('http://xxx.domain.com/fonts/museosans-700italic-webfont.svg#museo_sans700_italic') format('svg'),
         url('http://xxx.domain.com/fonts/museosans-700italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://xxx.domain.com/fonts/museosans-700italic-webfont.woff') format('woff'),
         url('http://xxx.domain.com/fonts/museosans-700italic-webfont.ttf') format('truetype');

    font-weight: 700;
    font-style: italic;

}
/*Museo Sans 900*/
@font-face {
    font-family: 'museo_sans';
    src: url('http://xxx.domain.com/fonts/museosans_900-webfont.eot');
    src: url('http://xxx.domain.com/fonts/museosans_900-webfont.svg#museo_sans900') format('svg'),
         url('http://xxx.domain.com/fonts/museosans_900-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://xxx.domain.com/fonts/museosans_900-webfont.woff') format('woff'),
         url('http://xxx.domain.com/fonts/museosans_900-webfont.ttf') format('truetype');

    font-weight: 900;
    font-style: normal;

}
/*Avro*/
@font-face {
    font-family: 'arvo';
    src: url('http://xxx.domain.com/fonts/arvo-regular-webfont.eot');
    src: url('http://xxx.domain.com/fonts/arvo-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://xxx.domain.com/fonts/arvo-regular-webfont.woff') format('woff'),
         url('http://xxx.domain.com/fonts/arvo-regular-webfont.ttf') format('truetype'),
         url('http://xxx.domain.com/fonts/arvo-regular-webfont.svg#arvoregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'arvo';
    src: url('http://xxx.domain.com/fonts/arvo-bold-webfont.eot');
    src: url('http://xxx.domain.com/fonts/arvo-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://xxx.domain.com/fonts/arvo-bold-webfont.woff') format('woff'),
         url('http://xxx.domain.com/fonts/arvo-bold-webfont.ttf') format('truetype'),
         url('http://xxx.domain.com/fonts/arvo-bold-webfont.svg#arvobold') format('svg');
    font-weight: bold;
}
    @font-face {
    font-family: 'arvo';
    src: url('http://xxx.domain.com/fonts/arvo-italic-webfont.eot');
    src: url('http://xxx.domain.com/fonts/arvo-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://xxx.domain.com/fonts/arvo-italic-webfont.woff') format('woff'),
         url('http://xxx.domain.com/fonts/arvo-italic-webfont.ttf') format('truetype'),
         url('http://xxx.domain.com/fonts/arvo-italic-webfont.svg#arvoitalic') format('svg');
    font-weight: normal;
    font-style: italic;
}

@font-face {  
  font-family: "museosans-300";  
    src: url( 'http://xxx.domain.com/fonts/museosans-300.eot' ); /* IE */  
    src: local("museosans-300"), url( 'http://xxx.domain.com/fonts/museosans-300.ttf' ) format("truetype"); /* non-IE */  
}

【问题讨论】：

标签： html css firefox fonts font-face

【解决方案1】：

确保.woff 文件存在，然后使用ctrl+F5 重新加载网站。

【讨论】：

什么意思？当然 .woff 存在并且 ctrl+F5 显然不是这里的解决方案。
我的意思是，加载.woff 文件时可能存在问题，或者它可能是无效/损坏的文件链接（我不确定）。在进行任何更改后，我建议 ctrl + f5 .. 只是为了防止从缓存加载页面。

【解决方案2】：

font-faces 很有趣，我听说顺序可以产生影响。我使用它并且从未遇到过问题：

 @font-face {
    font-family:'Name';
    src: url('fontName.eot');
    src: url('fontName.eot?#iefix') format('embedded-opentype'),
         url('fontName.woff') format('woff'),
         url('fontName.ttf') format('truetype'),
         url('fontName.svg#fontName') format('svg');
    font-weight: normal;
    font-style: normal;
 }

如果这不起作用，我会说您的 eot 和 woff 文件可能已损坏。如果您使用了可能发生的字体生成器。再试一次或换一个。

【讨论】：