面对不适用于Firefox，但与Chrome和IE一起工作
以下代码适用于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 。 这怎么可能？ 我错过了什么？
本地运行网站（ file:/// ）
Firefox默认配置了一个非常严格的“file uri origin”（ file:/// ）策略：让它的行为与其他浏览器一样，转到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编码处理字体字体，很丑，但也可以。
这里有一个很好的回顾
除了将以下内容添加到.htaccess之外：（谢谢@Manuel）
<FilesMatch ".(ttf|otf|eot)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
您可能想要尝试明确地向.htaccess文件添加webfont mime类型......就像这样：
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
我也有这个问题。 我在这里找到了答案：http://www.dynamicdrive.com/forums/showthread.php?t=63628
这是一个适用于firefox的解决方案的例子，你需要将这一行添加到你的字体css：
src: local(font name), url("font_name.ttf");
上一篇: face not working with Firefox, but working with Chrome and IE
下一篇: Should I locally store CSS generated by the Google Web Fonts API?