@font-face 在 Firefox 中不配合

Question

我尝试了很多事情，包括单击与我的问题相关的所有问题（有很多！）并尝试了他们所有的“解决方案”，但没有一个对我有用。我尝试将 .eot 文件包装在条件 IE 语句中，但这也不起作用。有人说如果你不在自己的服务器上托管文件，@font-face 将无法在 Firefox 中工作......或者类似的东西。不管怎样，请前往此处查看所有其他浏览器与 Firefox 之间的比较。请不要殴打！我确实尝试了 Google 和 stackoverflow 提供的所有解决方案。 （请记住，这是 Tumblr 主题，所有文件/图像都必须通过 Tumblr 的上传者 .)

提前致谢！

另外，这是我一直在使用的代码：

<!--[if IE]>
<style>
@font-face {
font-family: 'S';
src: url('http://static.tumblr.com/ctwb3zj/5bTlflus9/zegoelight-u-webfont.eot');
}
</style>
<![endif]-->

<style>
@font-face {
font-family: 'S';
src: url('http://static.tumblr.com/ctwb3zj/5bTlflus9/zegoelight-u-webfont.eot');
src: local('S'), 
     local('S'), 
     url('http://static.tumblr.com/ctwb3zj/n4Zlfluv6/zegoelight-u-webfont.ttf')      
format('truetype'),
     url('http://static.tumblr.com/ctwb3zj/ovQlfluz3/zegoelight-u-webfont.svg#font')    
format('svg'); 
     url('http://static.tumblr.com/ctwb3zj/1AJlfluwz/zegoelight-u-webfont.woff')
format('woff');
}
</style>

我尝试在 Firefox 中转到 about:config 并将 security.fileuri.strict_origin_policy 切换为 false，但它不起作用。另外，我需要一种方法，以便所有查看我的主题或使用它的用户也能够查看字体，并且默认情况下设置为 true。

Answer 1

编辑：

这是解决方案：
跨域解决方法

Firefox 不喜欢跨域嵌入。

Answer 2

Earl，我不想告诉你这一点，但你的问题不在于你的 @font-face 规则。至少当我查看你的网站时不是这样。当您使用 CSS font-family 时，您需要确保所选堆栈中每个不同字体之间有一个逗号。
您的 h6 选择器是：

h6 {font-size:36px; font-family: 'S' sans-serif;}

应该是：

h6 {font-size:36px; font-family: 'S', sans-serif;}

尝试一下，我认为它会适合您。只需确保所有字体系列堆栈的多种字体之间都有逗号即可。 Firefox 对解析技术上不正确的 CSS 更加严格； Firefox 只是忽略它。这似乎就是您遇到问题的原因，而不是您的@font-face。

Answer 3

我不完全相信你的@font-face 规则。你能复制以下内容并看看它有什么区别（如果有）吗？只是为了清理东西。

@font-face {
font-family: 'S';
src: url('http://static.tumblr.com/ctwb3zj/5bTlflus9/zegoelight-u-webfont.eot');
src: local('☺'),
     url('http://static.tumblr.com/ctwb3zj/n4Zlfluv6/zegoelight-u-webfont.ttf')      
format('truetype'),
     url('http://static.tumblr.com/ctwb3zj/ovQlfluz3/zegoelight-u-webfont.svg#font')    
format('svg'); 
     url('http://static.tumblr.com/ctwb3zj/1AJlfluwz/zegoelight-u-webfont.woff')
format('woff');
}

这只是清理了一些小事情。我还建议将您的字体名称更改为“S”以外的其他名称；例如“Zegoe Light”。

不过，Ivo Wetzel 从您的评论来看是正确的，这可能是 Tumblr 提供具有未知文件扩展名的媒体的方式存在问题。

Answer 4

我也遇到过类似的问题，它在任何地方都有效，但在 Mac 上的 Firefox4 中却不起作用。我在另一个 @media 块中声明了 @font-face-Stuff （仅加载非移动设备的字体） - 这就是导致错误的原因。

这不起作用：

@media sth... {

  @font-face {
    ...
  }

}

这确实起作用：

@font-face {
  ..
}

@media sth... {

}