CSS @ font-face不支持Firefox,但使用Chrome和IE浏览器

Question

以下代码适用于Google Chrome测试版以及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:///)

file:///默认情况下,Firefox附带了一个非常严格的"文件uri origin"()策略:让它像其他浏览器一样运行about:config,过滤,过滤fileuri并切换以下首选项:

security.fileuri.strict_origin_policy

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

出版网站

根据我在下面的评论,您在部署站点后遇到此问题,您可以尝试添加其他标头,以查看您的问题是否将自身配置为跨域问题:它不应该,因为您指定了相对路径,但我还是试试看:在你的.htaccess文件中,指定你想为每个请求的.ttf/.otf/.eot文件发送一个额外的标题:

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

坦率地说,我不希望它有任何区别,但它是如此简单,值得尝试:否则尝试使用base64编码为您的字体字体,丑陋但它也可能有效.

这里有一个很好的回顾

Answer 2

除了将以下内容添加到.htaccess :(感谢@Manuel)

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

您可能想尝试将webfont mime类型显式添加到.htaccess文件中......如下所示:

AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff

最后,我的.htaccess文件看起来像这样(对于允许webfonts在所有浏览器中工作的部分)

# BEGIN REQUIRED FOR WEBFONTS

AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff

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

# END REQUIRED FOR WEBFONTS

Answer 3

我也遇到过这个问题.我在这里找到了答案:http://www.dynamicdrive.com/forums/showthread.php？t = 63628

这是一个适用于firefox的解决方案的示例,您需要将此行添加到您的font face css:

src: local(font name), url("font_name.ttf");