CSS@font-face不支持Firefox，但支持Chrome和IE

小开

我不知道您是如何创建语法的，因为我从未在字体声明中使用SVG，但Font Squirel有一个非常好的工具，可以从一种字体创建防弹语法font-face.

http：//www.fontsquirrel.com/fontface/generator.

小开

您是在本地文件中还是在Web服务器上进行测试？对于跨域规则，不同目录中的文件被视为不同的域，因此如果您在本地进行测试，则可能会遇到跨域限制。

否则，指向发生问题的URL可能会有所帮助。

此外，我建议查看Firefox错误控制台，查看是否报告了任何CSS语法错误或其他错误。

此外，我注意到您可能希望在第二个@font-face规则中使用font-weight：bold.

小开

如果你得到一些404，你能和萤火虫核实一下吗？我在PASS中遇到了问题，我发现扩展名是相同的，但Linux file.TTF与file.TTF不同。它适用于除Firefox以外的所有浏览器。

希望能有所帮助！

小开

最佳答案

本地运行站点（`file:///`）

默认情况下，Firefox带有非常严格的“文件URI来源”（file:///）策略：要使其行为与其他浏览器一样，请转到about:config，按fileuri进行过滤，并切换以下首选项：

security.fileuri.strict_origin_policy

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

发布的网站

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

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

坦率地说，我不指望它会有什么不同，但它是如此简单，值得一试：否则，尝试使用Base64编码为您的字体字体，丑陋，但它可能也工作。

一个很好的总结是在这里。

小开

这是如何设置字体的路径的问题。由于您没有以“/”作为路径的开头，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";
}

小开

特别是对于这种字体，您应该使用Google字体API：

http：//code.google.com/webfonts/family？family=droid+sans.

如果您仍然希望使用FontSquirrel的工具包生成器，请使用Smiley Hack选项来消除本地字体问题。生成工具包后，检查生成的demo.HTML在Firefox中是否正常工作。我打赌是的。现在把它上传到你的服务器上--我打赌它在那里也能工作，因为FontSquirrel很棒。

但是，如果您在将生成的工具包代码集成到项目中时破坏了它，请使用标准的调试方法--检查404并逐行进行，直到找到问题所在。WOFF肯定应该在FF工作，所以这是一个很好的起点。

最后，如果这些都不起作用，请更新Firefox.我写这些都是假设你用的是最新的。但您没有指定要签入的版本，因此这也可能是您的问题。

小开

尝试在@font-face指令中削弱本地源声明。

在Firefox或Google字体API中有一个已知的错误，如果字体是本地安装的，并且与定义的本地名称匹配，则会阻止使用字体的变体：

http：//code.google.com/p/googlefontdirectory/issues/detail？id=13.

要有效地削弱本地声明，只需使您的本地源字符串变得毫无意义。普遍接受的惯例是使用笑脸Unicode字符（"☺"）。为什么？Paul Irish在他的博客上有一个很好的解释：

http：//paulirish.com/2010/font-face-gotchas/#smiley.

小开

我在Mac上运行FF4时就遇到了这个问题。我运行了一个本地开发服务器，我的@font-face声明工作正常。我迁移到Live，FF会在第一次页面加载时“刷新”正确的字体，但当导航更深时，字体默认为浏览器样式表。

我发现解决方案在于将以下声明添加到.htaccess

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

发现通过

小开

还没有人提到的一个简单的解决方案是使用Base64编码将字体直接嵌入到CSS文件中。

如果您正在使用fontsquirrel.com，请在font-face kit生成器中选择专家模式，向下滚动并选择CSS选项下的Base64编码-下载的font-kit将准备好即插即用。

这还具有减少页面加载时间的额外好处，因为它需要减少一个HTTP请求。

小开

试试这个..

http：//geoff.evason.name/2010/05/03/cross-domain-workaround-for-font-face-and-firefox/.

小开

也可能是在font-face标记的路径中使用URL.如果你使用“ http：//domain.com ”，它在火狐中不起作用，对我来说，把它改成“ http：//www.domain.com ”就可以了。

小开

我也有同样的问题。仔细检查您的代码是否符合H1、H2或@font-face规则所针对的任何样式。我发现我错过了font-family: 'custom-font-family' Arial, Helvetica etc后的昏迷，它在除火狐以外的所有浏览器中都显示良好。我加了昏迷，它起作用了。

小开

我将把它留在这里，因为我的同事发现了一个相关的“字体在Firefox上不起作用，但在其他任何地方都不起作用”的问题的解决方案。

问题只是Firefox搞乱了字体家族声明，这最终解决了它：

body{ font-family:"MyFont" !important; }

PS：我也在使用HTML5样板文件。

小开

除了将以下内容添加到您的.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

小开

我也有类似的问题。FontSquirel演示页面在FF中工作，但不是我自己的页面，即使所有文件都来自同一个域！

事实证明，我将我的样式表与一个绝对URL（http：//example.com/style.css）链接，因此FF认为它来自不同的域。相反，将样式表链接href更改为/style.CSS为我解决了一些问题。

小开

我要提到的是，有些字体在Firefox中存在问题，如果它们的文件名包含特定的字符。我最近遇到了一个问题与字体'模数'，其中有一个文件名' 237D7B_0_0 '。删除文件名中的下划线并更新CSS以匹配新的文件名解决了这个问题。其他类似字符的字体没有这个问题，这是非常奇怪的..可能是Firefox中的一个错误。我建议将文件名仅保留为字母数字字符。

小开

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

这是一个在Firefox上工作的解决方案的示例，您需要将此行添加到您的字体外观CSS：

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

小开

当我遇到这个问题时，使用.htaccess访问控制允许来源规则对我不起作用。

相反，在IIS的web.config中插入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>

这对我来说是一种魅力。如果需要限制对特定域的访问，请将*替换为域。

小开

也许你的问题是命名问题，特别是关于使用（或不使用）空格和连字符。

我遇到了类似的问题，我认为我已经通过在font-/family-名称周围放置可选的引号（）解决了这个问题，但这实际上隐式地解决了命名问题。

我并不完全了解最新的CSS规范，而且（至少对我来说）在不同的客户如何解释规范方面存在一些模糊性。此外，它似乎还与PostScript命名约定有关，但如果我错了，请纠正我！

总之，我现在的理解是，你的声明混合了两种不同的味道。

@font-face {
font-family: "DroidSerif Regular";

如果您认为机器人是实际的族名，桑斯和衬线是其成员，就像它们的子代SANS常规或衬线加粗一样，那么您可以在此处使用空格连接标识符，或者删除空格并使用驼峰式大小写作为族名，使用连字符作为子标识符。

应用于您的声明，它将如下所示：

@font-face {
font-family: "Droid Serif Regular";

或者

@font-face {
font-family: DroidSerif-Regular;

我认为两者都应该是完全合法的，不管有没有报价，但我在不同的客户之间取得了不同的成功。也许，有一天，我有一些时间来弄清楚这个/这些问题的细节。

我发现这篇文章有助于理解所涉及的一些方面： http：//mathiasbynens.be/notes/unquoted-font-family

本文提供了关于PostScript的更多详细信息，以及一些指向Adobe规范PDF的链接： http：//rachaelmoore.name/posts/design/css/find-font-name-css-family-stack/

小开

无需设置，只需从font-family中删除引号和空格：

这

body {font-family: "DroidSerif Regular", serif; }

变成了这个

body {font-family: DroidSerifRegular, serif; }

小开

我也有同样的问题。我必须创建一个名为“字体”的新文件夹，并将其放在WP_内容中。我可以从我的浏览器访问它，就像这个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");
}

小开

我的问题是Windows将字体命名为' font.TTF '，而Firefox需要' font.TTF '。我看到在Linux中打开我的项目后，将字体重命名为Proper Name，一切正常。

小开

在我的例子中，我解决了插入font-face样式代码的问题。

<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页面的标题中，在样式标签中。对我有用！

小开

我遇到了同样的问题，让字体在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);
}

注意到URL中“字体”前面的斜杠了吗？这告诉浏览器从根目录开始，然后访问资源。至少对我来说-问题解决了。

小开

正因为如此，这是谷歌搜索结果中最热门的问题之一，我想补充一下是什么为我解决了这个问题：

我必须从font-face的SRC中删除格式（OpenType），然后它也可以在Firefox中工作。在此之前，它在Chrome和Safari中运行良好。

小开

这可能不是因为你的代码，而是因为你的火狐配置。

尝试从Tool bar西方的到Unicode

View > Text Encoding > Unicode

小开

如果您尝试导入外部字体，您将面临Firefox和其他浏览器最常见的问题之一。有时你的字体在谷歌浏览器或其他浏览器中运行良好，但不是在每个浏览器中都运行良好。

这种类型的错误有很多原因，其中一个最大的原因是这个问题是以前预先定义的字体。你需要补充！每行CSS代码结束后的重要关键字如下：

示例：

@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 ”替换为您的字体系列，并根据您的字体目录替换URL.

如果你进入！重要说明：在CSS代码浏览器中，自动关注此部分并覆盖以前使用的属性。更多详情请访问：https：//answerdone.blogspot.com/2017/06/font-face-not-working-solution.html

小开

我遇到了同样的问题，通过为内容添加元数据解决了这个问题：

<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">

在Firefox和Edge中，如果HTML中有Unicode文本，就会发生这种情况。

小开

Firefox可以让你完全关闭网页字体。这是我的情况。

要打开它，请转到“首选项” “内容”“高级”并选中该框。

Fontspring的相关文章

小开

这里还有一个要添加到列表中。我发现，如果您指定的本地src的名称与通用字体名称相匹配，则会违反Firefox（仅限Firefox）中的整个规则。示例：

@font-face {
font-family: code;
src: local(Monaco),
url(monaco.woff2) format("woff2"),
local(monospace);
}

这在Firefox（从版本95.0.2开始）中将失败，并以无样式的默认值（Times）显示文本，因为最后一个src值与Firefox支持的通用字体（monospace）的名称匹配。下列值都以相同的方式失败：

cursive
fantasy
monospace
sans-serif
serif
system-ui

这肯定是一个边缘案例（可能是一个错误），但它可能会帮助一些人。你不能以这种方式退回到通用字体，如果出于某种原因，你确实需要引用同名的本地字体，你应该把它放在引号之间。

CSS@font-face不支持Firefox，但支持Chrome和IE

本地运行站点（file:///）

发布的网站

本地运行站点（`file:///`）