CSS @font-face 不适用于 Firefox，但适用于 Chrome 和 IE
以下代码适用于 Google Chrome beta 和 IE 7.但是，Firefox 似乎对此有问题.我怀疑这是如何包含我的 CSS 文件的问题，因为我知道 Firefox 对跨域导入不太友好.
The following code works in Google Chrome beta as well as IE 7. However, Firefox seems to have a problem with this. I'm suspecting it to be a problem of how my CSS files are included, cause I know Firefox is not too friendly about cross-domain imports.
但这只是静态 HTML，不存在跨域问题.
But this is all just static HTML and there's no question of cross-domain.
在我的登陆页面.html上，我像这样进行了 CSS 导入:
On my landing-page.html I do a CSS import like so:
<link rel="stylesheet" href="../css/main.css" type="text/css" media="screen, projection" />
在 main.css 中，我还有一个像这样的导入:
Within the main.css I have another imports like so:
@import url("reset.css");
@import url("style.css");
@import url("type.css");
在 type.css 中我有以下声明:
and within the type.css I have the following declarations:
@font-face {
font-family: "DroidSerif Regular";
src: url("font/droidserif-regular-webfont.eot");
src: local("DroidSerif Regular"),
url("font/droidserif-regular-webfont.woff") format("woff"),
url("font/droidserif-regular-webfont.ttf") format("truetype"),
url("font/droidserif-regular-webfont.svg#webfontpB9xBi8Q") format("svg");
font-weight: normal; font-style: normal; }
@font-face {
font-family: "DroidSerif Bold";
src: url("font/droidserif-bold-webfont.eot");
src: local("DroidSerif Bold"),
url("font/droidserif-bold-webfont.woff") format("woff"),
url("font/droidserif-bold-webfont.ttf") format("truetype"),
url("font/droidserif-bold-webfont.svg#webfontpB9xBi8Q") format("svg");
font-weight: normal; font-style: normal; }
body { font-family: "DroidSerif Regular", serif; }
h1 { font-weight: bold; font-family: "DroidSerif Bold", serif; }
我在 type.css 所在的位置有一个名为font"的目录.这个字体目录包含了所有的woff/ttf/svg文件等
I have a directory called "font" in the same location as type.css. This font directory contains all the woff/ttf/svg files etc.
我被这个难住了.它适用于 Chrome 和 IE，但不适用于 Firefox.这怎么可能?我错过了什么?
I'm stumped on this one. It works in Chrome and IE but not on Firefox. How is this possible? What am I missing?
本地运行网站 (file:///)
Firefox 默认带有非常严格的文件 uri 来源"(file:///) 策略:要让它像其他浏览器一样运行，请转到 about:config，按 fileuri 过滤并切换以下首选项:
LOCALLY RUNNING THE SITE (file:///)
Firefox comes with a very strict "file uri origin" (file:///) policy by default: to have it to behave just as other browsers, go to about:config, filter by fileuri and toggle the following preference:
security.fileuri.strict_origin_policy
将其设置为 false，您应该能够跨不同路径级别加载本地字体资源.
Set it to false and you should be able to load local font resources across different path levels.
根据我下面的评论，并且您在部署站点后遇到此问题，您可以尝试添加一个额外的标头以查看您的问题是否将自身配置为跨域问题:它不应该，因为您指定相对路径，但无论如何我都会尝试一下:在您的 .htaccess 文件中，指定您要为每个被请求的 .ttf/.otf/.eot 文件发送一个额外的标头:
As per my comment below, and you are experiencing this problem after deploying your site, you could try to add an additional header to see if your problem configures itself as a cross domain issue: it shouldn't, since you are specifying relative paths, but i would give it a try anyway: in your .htaccess file, specify you want to send an additional header for each .ttf/.otf/.eot file being requested:
<FilesMatch ".(ttf|otf|eot)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
坦率地说，我不希望它有任何不同，但它是如此简单值得一试:否则尝试为您的字体使用 base64 编码，虽然丑陋，但它也可能有效.
Frankly, I wouldn't expect it to make any difference, but it's so simple it's worth trying: else try to use base64 encoding for your font typeface, ugly but it may works too.
有一个很好的回顾 这里