以下代码适用于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 。这怎么可能？我错过了什么？
答案 0 :(得分：219)
file:///）默认情况下，Firefox附带了一个非常严格的“文件uri来源”（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编码作为你的字体字体，丑陋但它也可能有效。< / p>
有一个很好的回顾here
答案 1 :(得分：40)
除了将以下内容添加到.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
答案 2 :(得分：17)
我也遇到过这个问题。我在这里找到了答案：http://www.dynamicdrive.com/forums/showthread.php?t=63628
这是一个适用于firefox的解决方案的示例，您需要将此行添加到您的字体css：
src: local(font name), url("font_name.ttf");
答案 3 :(得分：4)
我有完全相同的问题。我不得不创建一个名为＆＃34; fonts＆＃34;的新文件夹。并把它放在wp_content中。我可以通过我的浏览器访问它，例如 http://www.example.com/wp-content/fonts/CANDY.otf
以前，fonts文件夹与我的CSS文件位于同一目录中，@ font-face看起来像这样：
@font-face {
font-family: CANDY;
src: url("fonts/CANDY.otf");
}
正如我上面提到的，这不适用于Firefox，只适用于Chrome。现在它正在运行，因为我使用了绝对路径：
@font-face {
font-family: CANDY;
src: url("http://www.example.com/wp-content/fonts/CANDY.otf");
}
答案 4 :(得分：3)
我提到一些字体在firefox中有问题，如果它们的文件名包含特定字符。我最近遇到了一个问题，字体'Modulus'的文件名为'237D7B_0_0'。删除文件名中的下划线并更新css以匹配新文件名解决了这个问题。其他具有类似字符的字体没有这个非常好奇的问题......可能是firefox中的一个bug。我建议将文件名保留为字母数字字符。
答案 5 :(得分：3)
我遇到了同样的问题。使用@ font-face规则仔细检查您的代码是否为H1，H2或您所定位的任何样式。在font-family: 'custom-font-family' Arial, Helvetica etc之后我发现自己错过了昏迷状态。除了Firefox之外，它在每个浏览器中显示都很好。我添加了昏迷，它起作用了。
答案 6 :(得分：3)
我会把这个留在这里，因为我的同事找到了一个相关的“font-face无法解决firefox但其他地方都有问题”的解决方案。
问题只是Firefox弄乱了font-family声明，最终修复了它：
body{ font-family:"MyFont" !important; }
PS：我也在使用html5boilerplate。
答案 7 :(得分：2)
特别是对于这种字体，您应该使用Google字体API：
http://code.google.com/webfonts/family?family=Droid+Sans
如果您仍想使用FontSquirrel的套件生成器，请使用Smiley hack选项消除本地字体问题。生成工具包后，请检查生成的demo.html是否适用于FireFox。我打赌它确实如此。现在将它上传到你的服务器 - 我敢打赌它也可以在那里工作，因为FontSquirrel真棒。
但是，如果在将生成的套件代码集成到项目中时将其打破，请使用标准的调试方法 - 检查404并逐行进行，直到找到问题为止。 WOFF肯定适用于FF，所以这是一个很好的起点。
最后，如果这些都不起作用，请更新FireFox。假设您使用的是最新的，我写了这一切;但是您没有指定要签入的版本，因此这也可能是您的问题。
答案 8 :(得分：2)
尝试在@font-face指令中使用本地源声明。
Firefox或Google Font API中存在一个已知错误，如果字体在本地安装，并且与定义的本地名称匹配，则会阻止使用字体变体：
http://code.google.com/p/googlefontdirectory/issues/detail?id=13
要有效地nerf本地声明，只需使您的本地源字符串有些废话。普遍接受的惯例是使用笑脸unicode字符（"☺"）。为什么？ Paul Irish在他的博客上有一个很好的解释：
答案 9 :(得分：2)
我在mac上运行ff4时遇到了这个问题。我有一个本地开发服务器正在运行，我的@ font-face声明工作正常。我迁移到live并且FF会在第一页加载时“闪烁”正确的类型，但是当导航更深时，字体默认为浏览器样式表。
我发现解决方案在于将以下声明添加到.htaccess
<FilesMatch "\.(ttf|otf|eot)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
找到via
答案 10 :(得分：2)
没有人提到的一个简单的解决方案是使用base64编码将字体直接嵌入到css文件中。
如果您使用的是fontsquirrel.com，请在font-face Kit Generator中选择专家模式，向下滚动并选择 CSS选项<下的 Base64编码 / strong> - 下载的Font-Kit即可即插即用。
这也有减少页面加载时间的附带好处，因为它需要少一个http请求。
答案 11 :(得分：1)
您是在本地文件中测试还是在Web服务器上测试？不同目录中的文件被视为跨域规则的不同域，因此如果您在本地进行测试，则可能会遇到跨域限制。
否则，可能有助于指向出现问题的URL。
另外，我建议查看Firefox错误控制台，看看是否报告了任何CSS语法错误或其他错误。
另外，我注意到你可能想要第二个@ font-face规则中的font-weight：bold。
答案 12 :(得分：1)
使用.htaccess访问控制允许来源规则在我遇到此问题时对我不起作用。
相反，在web.config中的IIS中插入如下所示的system.webServer块。
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.webServer>
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
</customHeaders>
</httpProtocol>
</system.webServer>
</configuration>
这对我来说就像一个魅力。如果您需要限制对特定域的访问，请将*替换为域。
答案 13 :(得分：1)
我遇到了在Firefox中正确显示字体的问题。这是我发现为我工作的东西。在url属性中保存字体的目录之前添加斜杠。这是我之前和之后的版本：
B E F O R E:
@font-face
{ font-family: "GrilledCheese BTN";
src: url(fonts/grilcb__.ttf);
}
A F T E R:
@font-face
{ font-family: "GrilledCheese BTN";
src: url(/fonts/grilcb__.ttf);
}
注意网址中'fonts'之前的前导斜杠？这告诉浏览器从根目录开始然后访问资源。至少对我来说 - 解决了问题。
答案 14 :(得分：0)
就我而言，我解决了插入字体样式代码的问题
<style type="text/css">
@font-face {
font-family: 'Amazone';font-style: normal;
/*font-weight:100; -webkit-font-smoothing: antialiased; font-smooth:always;*/
src: local('Amazone'), url(font/Amazone.woff) format('woff');}
</style>
直接在index.html或php页面的标题中，在样式标记中。 适合我！
答案 15 :(得分：0)
因为这是Google解决此问题的最佳结果之一，我想为我添加解决此问题的原因：
我不得不从font-face的src中删除格式（opentype），然后它也可以在Firefox中使用。在此之前，它在Chrome和Safari中运行良好。
答案 16 :(得分：0)
可能不是因为你的代码，而是因为你的Firefox配置。
从Tool bar 西方到 Unicode
View > Text Encoding > Unicode
答案 17 :(得分：0)
如果您尝试导入外部字体，则会遇到Firefox和其他浏览器最常见的问题之一。有些时候，您的字体在Google Chrome浏览器或其他浏览器中运行良好但在每个浏览器中都不能正常运行。
这种类型的错误有很多原因，这个问题背后的最大原因之一是以前的每个定义的字体。您需要在每行CSS代码结束后添加！important关键字，如下所示：
示例：
@font-face
{
font-family:"Hacen Saudi Arabia" !important;
src:url("../font/Hacen_Saudi_Arabia.eot?") format("eot") !important;
src:url("../font/Hacen_Saudi_Arabia.woff") format("woff") !important;
src: url("../font/Hacen_Saudi_Arabia.ttf") format("truetype") !important;
src:url("../font/Hacen_Saudi_Arabia.svg#HacenSaudiArabia") format("svg") !important;
}
.sample
{
font-family:"Hacen Saudi Arabia" !important;
}
描述： 在CSS文件或代码中输入上面的代码。在上面的示例中，将“Hacen Saudi Arabia”替换为您的font-family，并根据您的字体目录替换url。
如果您在css代码浏览器中输入！important，请自动关注此部分并覆盖以前使用的属性。 有关详细信息，请访问：https://answerdone.blogspot.com/2017/06/font-face-not-working-solution.html
答案 18 :(得分：0)
我遇到了同样的问题并通过添加内容元来解决它：
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
如果您的html中包含Unicode文本，则会在Firefox和Edge中发生这种情况。
答案 19 :(得分：0)
无需乱搞设置只需删除font-family中的引号和空格：
此
body {font-family: "DroidSerif Regular", serif; }
变成这个
body {font-family: DroidSerifRegular, serif; }
答案 20 :(得分：0)
也许你的问题是一个命名问题，特别是关于空格和连字符的使用（或不使用）。
我遇到了similair问题，我认为通过将可选的引号（'）放在font- / family-names附近来修复，但这实际上隐含地修复了命名问题。
我并不完全了解CSS规范，并且（对我来说）在不同客户如何解释规范方面存在一些模糊性。此外，它似乎也与PostScript命名约定有关，但如果我错了请纠正我！
无论如何，正如我现在所理解的那样，你的声明使用了两种可能的不同口味的混合物。
@font-face {
font-family: "DroidSerif Regular";
如果您考虑 Droid 实际的姓氏，其中 Sans 和 Serif 是成员，就像他们的孩子 Sans Regular 或 Serif Bold 一样，你可以在任何地方使用空格来连接标识符，或者删除空格并使用CamelCasing作为familyName和连字符用于子标识符。
适用于您的声明，它看起来像这样：
@font-face {
font-family: "Droid Serif Regular";
OR
@font-face {
font-family: DroidSerif-Regular;
我认为两者都应该是完全合法的，无论有没有引号，但我在各种客户之间取得了不同的成功。也许，有一天，我有时间弄清楚这个/这些isseu / s的详细信息。
我发现这篇文章有助于理解所涉及的一些方面： http://mathiasbynens.be/notes/unquoted-font-family
本文详细介绍了PostScript的一些细节，以及Adobe规范PDF的一些链接： http://rachaelmoore.name/posts/design/css/find-font-name-css-family-stack/
答案 21 :(得分：0)
我有类似的问题。 fontsquirel演示页面在FF中工作，但不是我自己的页面，即使所有文件都来自同一个域！
事实证明我将样式表与绝对URL（http://example.com/style.css）相关联，因此FF认为它来自不同的域。将我的样式表链接href更改为/style.css而不是为我修复。
答案 22 :(得分：0)
答案 23 :(得分：0)
这是设置font-face路径的方法的问题。由于你没有用“/”开始路径，Firefox会尝试根据样式表的路径找到字体。所以基本上，Firefox正在“root / css / font”目录中查找你的字体，而不是“root / font”目录。您可以通过将字体文件夹移动到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";
}
答案 24 :(得分：0)
如果你得到一些404，你能用firebug检查吗？我在传递中遇到问题，我发现扩展名是相同的，但是linux file.ttf与file.TTF不同...并且它适用于除firefox之外的所有浏览器。
希望它有所帮助！
答案 25 :(得分：-2)
我的问题是Windows命名字体'font.TTF'和firefox预期'font.ttf'我看到在linux中打开我的项目后，将字体重命名为propper名称并且一切正常
答案 26 :(得分：-2)
也可以在font-face标签的路径中使用URL。如果您使用“http://domain.com”，它在Firefox中不起作用，因为我将其更改为“http://www.domain.com”。
答案 27 :(得分：-2)
我不知道你是如何创建语法的，因为我在字体声明中使用了svg，但是Font Squirel有一个很好的工具来从一种字体创建一个防弹语法字体 -