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

【问题标题】：CSS @font-face not working with Firefox, but working with Chrome and IECSS @font-face 不适用于 Firefox，但适用于 Chrome 和 IE
【发布时间】：2011-02-20 20:09:28
【问题描述】：

以下代码适用于 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。这怎么可能？我错过了什么？

【问题讨论】：

我现在遇到了 FontSquirrel 生成的指令和字体的确切问题。
出于测试目的，您可以尝试将@font-face 声明添加到您的html 之间的<style> 标记之间，看看您是否有同样的问题？
添加一个逗号也可以解决这个问题，比如：url('Sans-serif') format('woff')

标签： css firefox font-face file-uri

【解决方案1】：

我不知道你是如何创建语法的，因为我从来没有在字体声明中使用过 svg，但是 Font Squirel 有一个非常好的工具，可以仅从一种字体创建防弹语法 font-face。

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

【讨论】：

感谢 rnaud，我实际上使用了 fontsquirrel 来完成上述操作 :)。只需将制表符和空格重新格式化为可读形式。
您从未在字体声明中使用过 SVG，但您使用的是 Font Squirrel？然后你在字体声明中使用了 SVG。
@jason：您可以选择不将 SVG 与 Font Squirrel 一起使用。

【解决方案2】：

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

否则，将其指向出现问题的 URL 可能会有所帮助。

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

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

【讨论】：

嗯.. 是的，大卫，我似乎确实在本地运行它，但我以前让它有一个子目录与同一目录。所以我的 type.css 位于根文件夹中，而字体文件夹位于同一位置。所以 type.css 和字体文件夹在同一个目录下。为了安全起见，我还尝试将其从目录中删除并直接放置字体。它仍然无法在 Firefox 上运行。
我现在开始觉得这是以下两种情况之一：1）我的编码有问题，如果有人从上面的代码中发现任何东西，请指出来。 2) FF 不能很好地处理@font-face 和多个文件导入？我使用 main.css 来导入 @import type.css ，它又具有指向字体的文件夹链接？有轻的人吗？顺便说一句，感谢@David 的字体重量捕捉！
Firefox 可以很好地处理多个导入。你用的是什么版本？使用 FireBug 调试代码；使用消除过程。在本地工作会引入一些可以远程消除的问题。这就是你调试的方式！
“不同目录中的文件被视为跨域规则的不同域” - 不，它们不是。

【解决方案3】：

如果你得到一些 404，你能用萤火虫检查吗？我在传递过程中遇到了问题，我发现扩展名是相同的，但 linux file.ttf 与 file.TTF 不同......它适用于除 firefox 之外的所有浏览器。

希望对您有所帮助！

【讨论】：

我强烈怀疑它只会在一个浏览器而不是其他浏览器中出现 404。
@jason 一个浏览器可以使用不同的文件类型。 :)
好吧，在我遇到这个问题的情况下，我可以 100% 说 Firebug 的网络面板显示它已成功加载字体。

【解决方案4】：

在本地运行网站 (`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 编码 为您的字体字体，虽然丑陋但它也可以工作。

有一个很好的回顾here

【讨论】：

如果您不在本地工作，那么这可能无法解决该问题，但您可能希望在实时站点上使用基于根的路径，即“/resources/font”而不是相对的，如“../font”，但我不知道thumblr：如果你能给出网站的url，我可以看看。
字体声明在 Chrome、Safari 甚至所有的 IE6 中都可以正常工作......但不是 firefox。
啊，你说的是臭名昭著的跨域问题：你可以在 base64 编码中使用你的字体，或者在服务时要求 thumblr 添加一个额外的“Access-Control-Allow-Origin”标题字体。
那么火狐的跨域策略到底有多严格？就像，CDN 和站点共享同一个域，只是不同的子域。
@jason，乱七八糟的 64 位编码也不起作用？它对我有用。

【解决方案5】：

这是您如何设置字体路径的问题。由于您没有以“/”开头的路径，Firefox 将尝试根据样式表所在的路径查找字体。所以基本上，Firefox 正在“root/css/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";
}

【讨论】：

【解决方案6】：

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

http://code.google.com/webfonts/family?family=Droid+Sans

如果您仍想使用 FontSquirrel 的工具包生成器，请使用 Smiley hack 选项来消除本地字体问题。生成工具包后，检查生成的 demo.html 是否可以在 FireFox 中使用。我打赌确实如此。现在将它上传到你的服务器——我敢打赌它也可以在那里工作，因为 FontSquirrel 很棒。

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

最后，如果这些都不起作用，请更新 FireFox。假设您使用的是最新版本，我写了所有这些；但是您没有指定要签入的版本，所以这也可能是您的问题。

【讨论】：

实际上你不应该为此使用 Google Font API。如果您在本地安装了字体，Firefox 会出现问题，它会阻止使用字体变体（斜体、粗体等）。我发现解决这个问题的唯一方法是用笑脸来削弱本地 src 声明（当然，任何奇怪的字符都会这样做，它就是这样......快乐）。
这里是错误报告的链接：code.google.com/p/googlefontdirectory/issues/detail?id=13

【解决方案7】：

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

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

http://code.google.com/p/googlefontdirectory/issues/detail?id=13

为了有效地削弱本地声明，只需让本地源字符串变得无意义。普遍接受的约定是使用笑脸 unicode 字符 ("☺")。为什么？ Paul Irish 在他的博客上有一个很好的解释：

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

【讨论】：

不知道 Paul 我想出了一个新的子弹方法，将不得不尝试这个，看看它是否解决了我的 FF 字体问题。
[更新：虽然有帮助，但不能解决问题]。我确实得到了正确的解决方案。

【解决方案8】：

我在 Mac 上运行 ff4 时确实遇到了这个问题。我有一个本地开发服务器正在运行，我的@font-face 声明运行良好。我迁移到 live 并且 FF 会在第一页加载时“闪烁”正确的类型，但是当导航更深时，字体默认为浏览器样式表。

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

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

找到via

【讨论】：

【解决方案9】：

一种尚未有人提及的简单解决方案是使用 base64 编码将字体直接嵌入到 css 文件中。

如果您使用的是 fontsquirrel.com，请在 font-face Kit Generator 中选择 专家模式，向下滚动并选择 CSS OptionsBase64 Encode /strong> - 下载的 Font-Kit 将可以即插即用。

这还具有减少页面加载时间的附带好处，因为它需要更少的 http 请求。

【讨论】：

所选解决方案中的 cmets 确实提到了 base64 编码解决方案。
@KaushikGopal 我认为我发布此答案后必须编辑答案。

【解决方案10】：

试试这个....

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

【讨论】：

【解决方案11】：

也可以是在font-face标签的路径中使用URL。如果您使用“http://domain.com”，它在 Firefox 中不起作用，对我来说将其更改为“http://www.domain.com”就可以了。

【讨论】：

【解决方案12】：

我遇到了同样的问题。使用@font-face 规则仔细检查您的代码是否有 H1、H2 或任何您要定位的样式。我发现在font-family: 'custom-font-family' Arial, Helvetica etc 之后我错过了一个昏迷，它在除 Firefox 之外的所有浏览器中都显示得很好。我添加了昏迷，它起作用了。

【讨论】：

【解决方案13】：

我将把它留在这里，因为我的同事找到了一个解决相关“字体无法在 firefox 上工作，但在其他地方工作”问题的解决方案。

问题只是 Firefox 弄乱了 font-family 声明，这最终修复了它：

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

PS：我也在使用 html5boilerplate。

【讨论】：

【解决方案14】：

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

【讨论】：

也为我做了诀窍。我还必须添加 woff2： AddType font/woff2 .woff2

【解决方案15】：

我遇到了类似的问题。 fontsquirel 演示页面在 FF 中运行，但不是我自己的页面，即使所有文件都来自同一个域！

原来我将我的样式表与一个绝对 URL (http://example.com/style.css) 链接起来，所以 FF 认为它来自不同的域。将我的样式表链接 href 更改为 /style.css 而不是为我解决问题。

【讨论】：

【解决方案16】：

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

【讨论】：

这个。 MyFonts.com 吐出以这种方式命名的字体文件，并导致 Firefox 35 以各种奇怪的方式呈现。重命名字体解决了这个问题。

【解决方案17】：

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

这是一个适用于 Firefox 的解决方案示例，您需要将此行添加到您的字体 css：

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

【讨论】：

在font-face 声明中加入local('name') 只是意味着“尝试在用户的计算机上加载字体'名称'。如果找不到，则加载网络字体。” （见the MDN docs）。不过，很高兴它对你有用！ :)
它“为您”工作，因为您的计算机上安装了该字体。其他用户不会看到它。你只为你修好了。

【解决方案18】：

当我遇到这个问题时，使用 .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>

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

【讨论】：

【解决方案19】：

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

我遇到了类似的问题，我认为我已经通过在字体/系列名称周围放置可选引号 (') 来解决这个问题，但这实际上隐含地解决了一个命名问题。

我并不完全了解 CSS 规范，而且（至少对我而言）不同客户如何解释规范存在一些歧义。此外，它似乎也与 PostScript 命名约定有关，但如果我错了，请纠正我！

无论如何，据我所知，您的声明使用了两种可能的不同风味的混合物。

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

如果您认为 Droid 是实际的姓氏，Sans 和 Serif 是其中的成员, 就像他们的孩子 Sans Regular 或 Serif Bold 一样，然后你要么在每个地方都使用空格来连接标识符，要么删除空格并使用 CamelCasing 作为familyName和连字符用于子标识符。

应用于您的声明，它看起来像这样：

@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/

【讨论】：

【解决方案20】：

无需乱设置，只需从字体系列中删除引号和空格即可：

这个

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

变成这样

body {font-family: DroidSerifRegular, serif; }

【讨论】：

【解决方案21】：

我遇到了完全相同的问题。我必须创建一个名为“fonts”的新文件夹并将其放入 wp_content。我可以像这样从我的浏览器访问它 http://www.example.com/wp-content/fonts/CANDY.otf

以前，字体文件夹与我的 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");
}

【讨论】：

【解决方案22】：

我的问题是 Windows 将字体命名为 'font.TTF' 和 firefox 预期的 'font.ttf' 我看到在 linux 中打开我的项目后，将字体重命名为 propper 名称并且一切正常

【讨论】：

【解决方案23】：

就我而言，我解决了插入字体样式代码的问题

<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 页面的标题中，在样式标记中。为我工作！

【讨论】：

【解决方案24】：

让字体在 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 中“fonts”之前的斜杠了吗？这告诉浏览器从根目录开始，然后访问资源。至少对我来说 - 问题解决了。

【讨论】：

【解决方案25】：

因为这是针对此问题的最佳 Google 搜索结果之一，所以我想添加为我解决此问题的方法：

我必须从字体的 src 中删除格式（opentype），然后它也可以在 Firefox 中使用。在此之前它在 Chrome 和 Safari 中运行良好。

【讨论】：

【解决方案26】：

可能不是因为您的代码，而是因为您的 Firefox 配置。

试试这个Tool bar 西方到Unicode

View > Text Encoding > Unicode

【讨论】：

【解决方案27】：

如果您尝试导入外部字体，您将面临 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”替换为您的字体系列，并根据您的字体目录替换 url。

如果您在 css 代码浏览器中输入 !important，则会自动关注此部分并覆盖以前使用的属性。更多详情请访问：https://answerdone.blogspot.com/2017/06/font-face-not-working-solution.html

【讨论】：

【解决方案28】：

我遇到了同样的问题，并通过为内容添加元来解决它：

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

如果您的 html 中有 Unicode 文本，则在 Firefox 和 Edge 中会发生这种情况。

【讨论】：

【解决方案29】：

Firefox 允许您完全关闭网络字体。我就是这种情况。

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

related artice at fontspring

【讨论】：

【解决方案30】：

这里还有一个要添加到列表中。我发现，如果您指定一个名称与通用字体名称匹配的本地 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

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

【讨论】：

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

发布的网站

在本地运行网站 (`file:///`)