@font脸不适用于Mozilla Firefox？

Question

所以，我已经尝试了一切@font在Mozilla Firefox 3.6中工作。问题是我很确定这是因为我想在我的Tumblr博客上使用@font脸，所以我在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);
}

它不适用于双引号 （"），或单引号 （'） 或没有任何，我不知道该怎么办了。 ：/

Answer 1

这是跨域字体的问题：它们必须位于同一域中，或者必须存在HTTP标头"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 以提供正确的标题。

Answer 2

这是一个跨域的事情，您无法从自己的子域访问 static.tumblr.com。我之前已经通过在 css 中嵌入字体来解决这个问题。如果您转到此生成器并选择专家选项，则可以勾选"Base64 Encode"框，它将在tumblr上运行，因为.woff和.tft数据是css的一部分。