font-face在Chrome中运行,但在Firefox或IE中运行

时间:2014-01-15 17:49:54

标签: html css firefox fonts font-face

网站我们使用此字体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 */  
}

2 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

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文件可能已损坏。如果您使用了可能发生的字体生成器。再试一次或尝试不同的。