@font-face 不适用于 Mozilla Firefox？答案

【问题标题】：@font-face doesn't work with Mozilla Firefox?@font-face 不适用于 Mozilla Firefox？
【发布时间】：2012-08-09 05:44:48
【问题描述】：

所以，我已经尽一切努力让@font-face 在 Mozilla Firefox 3.6 中工作。问题是我很确定这是因为我想在我的 Tumblr 博客上使用@font-face，所以我在 Tumblr 上传器上上传字体。

@font-face {
font-family: feel_scriptregular;
src: url(http://static.tumblr.com/3fk4soa/zKcm8o1y2/feel_script.otf);
src: url(http://static.tumblr.com/3fk4soa/IyZm8o1sa/feel_script-webfont.eot?#iefix) format(embedded-opentype),
     url(http://static.tumblr.com/3fk4soa/wgFm8o1tk/feel_script-webfont.woff) format(woff),
     url(http://static.tumblr.com/3fk4soa/wlLm8o1us/feel_script-webfont.ttf) format(truetype),
     url(http://static.tumblr.com/3fk4soa/tofm8o1vl/feel_script-webfont.svg#feel_scriptregular) format(svg);
}

它不适用于双引号 (")、单引号 (') 或没有任何引号，我不知道该怎么办了.. :/

【问题讨论】：

请参阅：stackoverflow.com/questions/4872592/multiple-font-face-in-css/… 您的代码中实际上也没有有，所以...您能提供一个jsfiddle.net吗？

标签： css font-face

【解决方案1】：

这是跨域字体问题：它们必须在同一个域中，或者必须有 HTTP-header "Access-Control-Allow-Origin"

nginx 的解决方案 - https://gist.github.com/1131897 & https://serverfault.com/questions/186965/how-can-i-make-nginx-support-font-face-formats-and-allow-access-control-allow-o

所以，只需在您自己的主机上上传您的字体并修复您的 apache/nginx 以提供正确的标题。

【讨论】：

我不明白该怎么做。
@DarkFighter: +1，虽然对于建议的解决方案，我认为如果文件可以上传以从与 css 相同的域提供服务，我认为不需要调整 Access-Control-Allow-Origin 标头文件
@o.v.如果 css 文件与网站位于同一域 - 是的，不需要添加“Access-Control-Allow-Origin”标头。但在其他情况下 - 您应该将此标头提供给 Firefox。
@DarkFighter：是的，我知道，只是想你想让你的回复更清楚 - ...只需在你自己的主机上上传你的字体并修复你的 apache /nginx 提供正确的标题听起来很像“托管您自己的文件并修复标题”
这是最好的解决方案，其他都太复杂或太重了。

【解决方案2】：

这是一个跨域的东西，你不能从你自己的子域访问 static.tumblr.com。我之前通过在css中嵌入字体解决了这个问题。如果您转到this generator 并选择专家选项，您可以勾选“Base64 编码”框，它会在 tumblr 上工作，因为 .woff 和 .tft 数据是 css 的一部分。

【讨论】：