Web字体未在Firefox中显示

Question

http://miche.com/

这是最奇怪的事情.我们在上面的页面上使用了两种网络字体及其不同的权重:Benton Sans和Jubilat,我们都有许可证.h2("有兴趣加入米歇尔？""已经是迈克尔代表？")将成为Jubilat Regular,并在Firefox中正常显示; 然而,h1("欢迎!")是Jubilat Light,并且出现在Times New Roman中.

两个权重都是使用Font Squirrel生成的.两者都托管在同一台服务器上.两者都以相同的方式编码.我重新上传了这些文件.我试过,如果IE所以FF不尝试使用.eot.在你说之前:是的,我尝试过防弹.

当Light没有时,为什么常规会出现？我想知道我是不是使用了正确的CSS组合.

@font-face {
    font-family: 'JubilatLight';
    src: url('https://bc.miche.com/FileUploads/CMS/Documents/jubilatlightwebfont.eot');
    src: url('https://bc.miche.com/FileUploads/CMS/Documents/jubilatlightwebfont.eot?#iefix') format('embedded-opentype'),
         url('https://bc.miche.com/FileUploads/CMS/Documents/jubilatlightwebfont.woff') format('woff'),
         url('https://bc.miche.com/FileUploads/CMS/Documents/jubilatlightwebfont.ttf') format('truetype'),
         url('https://bc.miche.com/FileUploads/CMS/Documents/jubilatlightwebfont.svg#JubilatLight') format('svg');
    font-weight: normal;
    font-style: normal;
}
#main-container h1.jubilat {
    font-family: "JubilatLight";
    font-weight: normal;
    font-size: 40px;
    color: #701271;
    text-align: center;
}

Answer 1

我想到了.Firefox不接受绝对链接,而是想要相对.再加上Mo'Bulletproof,我能够让它像这样出现:

@font-face{ /* for IE */
font-family:JubilatLight;
src:url(/FileUploads/CMS/Documents/jubilatlightwebfont.eot);
}
@font-face { /* for non-IE */
font-family:JubilatLight;
src:url(http://:/) format("No-IE-404"),url(/FileUploads/CMS/Documents/jubilatlightwebfont.ttf) format("truetype");
}
#main-container h1.jubilattest {
    font-family: "JubilatLight";
    font-weight: normal;
    font-size: 40px;
    color: #701271;
    text-align: center;
}

然后是我的HTML:

<div id="main-container">
   <h1 class="jubilattest">WELCOME!</h1>
</div>

现在我已经想到了,我将能够修复其他字体.谢谢你们的建议.

Answer 2

只是想让你知道,配置htaccess还有一种方法(由Yu-Jie Lin描述)

他的代码:

<FilesMatch "\.(ttf|otf|eot)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>