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>

Answer 3

您的字体未正确上传/链接。

例如，

jubilatlightwebfont.woff会出现404错误。

查看Firefox的Web控制台。它会抛出一些错误，例如：

downloadable font: download failed (font-family: "JubilatLight" style:normal weight:normal stretch:normal src index:2): bad URI or cross-site access not allowed
source: https://bc.miche.com/FileUploads/CMS/Documents/jubilatlightwebfont.ttf @ https://www.miche.com/FileUploads/CMS/Documents/MicheCorp092911v2.css

（顺便说一下：h2元素对我来说也是Times New Roman。）

Answer 4

我看了你的CSS，看起来你没有正确定义H2的字体，所以它默认为TimesNewRoman：

#main-container h2.jubilat {
 color: #701271;
 font-family: "jubilat"; // <----------------
 font-size: 18px;
 font-weight: normal;
 text-align: center;
}

Answer 5

尝试在css-doc中使用已实现的base64编码字体文件：

@font-face {
  font-family:"font-name";
  src:url(data:font/opentype;base64,[paste-64-code-here]);
  font-style:normal;
  font-weight:400;
}

来源：http://sosweetcreative.com/2613/font-face-and-base64-data-uri

它运作得很好......

Web字体未在Firefox中显示

5 个答案: