CSS @font-face 不适用于 Firefox，但适用于 Chrome 和 IE

Question

以下代码在 Google Chrome beta 和 IE 7 中都有效。但是，Firefox 似乎对此有问题。我怀疑它是如何包含我的 CSS 文件的问题，因为我知道 Firefox 对跨域导入不太友好。

但这都是静态HTML，不存在跨域问题。

在我的 landing-page.html 上，我像这样导入 CSS:

<link rel="stylesheet" href="../css/main.css" type="text/css" media="screen, projection" />

在 main.css 中我有另一个像这样的导入:

@import url("reset.css");
@import url("style.css");
@import url("type.css");

在 type.css 中我有以下声明:

@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 文件等。

我被这个难住了。 它适用于 Chrome 和 IE，但不适用于 Firefox。这怎么可能？我错过了什么？

Answer 1

在本地运行站点 (file:///)

Firefox 默认带有非常严格的“文件 uri 源”(file:///) 策略:要让它像其他浏览器一样运行，请转到 about:config ，按 fileuri 过滤并切换以下首选项:

security.fileuri.strict_origin_policy

将其设置为false，您应该能够跨不同路径级别加载本地字体资源。

已发布的网站

根据我在下面的评论，如果您在部署网站后遇到此问题，您可以尝试添加一个额外的 header 以查看您的问题是否将自身配置为跨域问题:它不应该，因为您正在指定相对路径，但无论如何我都会尝试一下:在您的 .htaccess 文件中，指定您要为每个请求的 .ttf/.otf/.eot 文件发送一个额外的 header :

<FilesMatch "\.(ttf|otf|eot)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

坦率地说，我不希望它有任何不同，但它是如此简单，值得一试:否则尝试为你的字体使用 base64 编码，虽然丑陋但它也可能有效。

有一个很好的回顾 here