Firefox 中未显示 Web 字体答案

【问题标题】：Web font not showing in FirefoxFirefox 中未显示 Web 字体
【发布时间】：2012-04-16 10:05:11
【问题描述】：

这是最奇怪的事情。我们在上面的页面上使用了两种网络字体及其不同的权重：Benton Sans 和 Jubilat，这两种字体我们都有许可证。 h2（“有兴趣加入 Miche 吗？”“已经是 Miche 代表？”）设置为 Jubilat Regular，并在 Firefox 中正确显示；但是，h1（“欢迎！”）是 Jubilat Light，并显示为 Times New Roman。

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

为什么在 Light 不显示时显示 Regular？我想知道我是否只是没有使用正确的 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;
}

【问题讨论】：

请注意：我想通了，但 Stack 不会让我在提出问题 6 小时后发布我的答案，因为我没有 100 个代表，显然......很有意义。
这有帮助，但给我留下了一个问题：我不能用绝对 URL 来做到这一点吗？乐叹息
用绝对链接试试，在 Firefox 中测试。如果它不起作用，你就会知道它需要是相对的。不知道为什么会这样。

标签： html css firefox font-face

【解决方案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>

现在我已经弄清楚了，我将能够修复其他字体。谢谢三位的建议。

【讨论】：

我可以建议您接受正确答案（这个）并为其他人的努力点赞吗？
@Bazzz 感谢您的建议，但我没有足够的声誉来接受我自己的答案，直到明天，甚至无法投票给其他人。
Firefox 显然默认不支持外部托管的字体。因此，您可以在本地托管它们，使用字体的相对路径，和/或配置您的服务器以允许访问它们（例如，@Guido-Palacios 的回答）

【解决方案2】：

只是想让你知道，还有一种方法是通过配置htaccess（由Yu-Jie Lin描述）

他的代码：

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

【讨论】：

非常适合像我这样的 apache 菜鸟！

【解决方案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，对我来说。）

【讨论】：

它给出了 404，但它显示在服务器中。另一个也是。
“它出现在服务器中”是什么意思？在 ftp 上？

【解决方案4】：

我查看了您的 CSS，您似乎没有正确定义 H2 的字体，因此默认为 TimesNewRoman：

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

【讨论】：

实际上是我的 h1 标签有问题。 h2 显示正常。
请注意：我想通了，但 Stack 不会让我在提出问题 6 小时后发布我的答案，因为我没有 100 个代表，显然......很有意义。

【解决方案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

效果很好……

【讨论】：