@ font-face在Firefox中不合作

时间:2011-01-26 02:01:08

标签: html css firefox fonts font-face

我尝试了很多东西,包括点击与我的问题相关的所有问题(有吨!)并尝试了所有的“解决方案”,但没有一个对我有用。我尝试在条件IE语句中包装.eot文件,但这也不起作用。有人说,如果你没有在自己的服务器上托管文件,@ font-face将无法在Firefox中运行......或类似的东西。无论如何,转到here查看所有其他浏览器与Firefox之间的比较。请不要打!我确实尝试过Google和stackoverflow提供的所有解决方案。 (请记住,这是Tumblr主题,所有文件/图片必须通过Tumblr's uploader托管。)

提前致谢!

此外,这是我一直在使用的代码:

<!--[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。

4 个答案:

答案 0 :(得分:3)

编辑:

以下是解决方案: Cross domain workaround

Firefox不喜欢跨域嵌入。

答案 1 :(得分:1)

伯爵,我不想成为一个告诉你的人,但你的问题不是你的@ font-face规则。至少在我查看你的网站时并不是这样。当您使用CSS font-family时,您需要确保所选堆栈中每种不同字体之间都有逗号。 你的h6选择器是:

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

应该是:

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

尝试一下,我认为这对你有用。只需确保所有font-family堆栈在多种字体之间都有逗号。 Firefox对解析技术上不正确的CSS有点严格; Firefox只是忽略它。这似乎是你遇到问题的原因,而不是你的@ font-face。

答案 2 :(得分:0)

我对@ 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提供具有未知文件扩展名的媒体的方式的问题。

答案 3 :(得分:0)

我遇到了类似的问题,它可以在任何地方使用,但不适用于Mac上的Firefox4。我在另一个@media块中声明了@ font-face-Stuff(仅为非移动设备加载字体) - 这就是造成错误的原因。

这没有用:

@media sth... {

  @font-face {
    ...
  }

}

这确实有效:

@font-face {
  ..
}

@media sth... {

}