CSS @font-face 在 Firefox 中无法正常工作，但在 Chrome 和 IE 中可以。

Question

CSS @font-face 在 Firefox 中无法正常工作，但在 Chrome 和 IE 中可以。

198

以下代码在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中无法正常工作。这怎么可能？我错过了什么？

- KG -

3

我现在正遇到这个问题，与FontSquirrel生成的指令和字体完全相同。 - jason

为了测试，您可以尝试将@font-face声明添加到HTML的<style>标签之间，看看是否有相同的问题？ - Chris_O

添加一个逗号也可以解决这个问题，例如：url('Sans-serif') format('woff')。 - Farzan Balkani

30个回答

42

除了在.htaccess文件中添加以下内容之外：（感谢@Manuel）

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

您可能希望尝试将Web字体MIME类型明确添加到.htaccess文件中...就像这样：

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

最终，我的 .htaccess 文件看起来像这样（用于启用 webfont 在所有浏览器中工作的部分）

# 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

- alademann

1

这个方法对我也起作用了。我还得添加woff2： AddType font/woff2 .woff2 - hdomos

16

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

这是适用于Firefox的解决方案示例，您需要将以下行添加到字体CSS中：

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

- israeli

3

在font-face声明中加入local('name')的意思是“尝试在用户的计算机上加载字体' name'，如果找不到，则加载Web字体。”（请参阅[MDN文档]（https://developer.mozilla.org/zh-CN/docs/Web/CSS/@font-face））。仍然很高兴它适用于你！ :) - henry

4

因为你的电脑安装了这种字体，所以你看到了效果。其他用户将无法看到它。你只是为自己解决了这个问题。 - Hugo Delsing

4

因为我的同事找到了一个解决与"font-face在Firefox中不起作用但在其他地方起作用"问题相关的方法，所以我将其留在这里。

问题是Firefox混淆了字体家族声明，以下内容最终解决了它：

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

PS：我也在使用html5boilerplate。

- ruyadorno

4

我曾经遇到过同样的问题。请再次检查你使用 @font-face 规则所针对的 H1、H2 或其他样式的代码。我发现在 font-family: 'custom-font-family' Arial, Helvetica 等等 后面缺少了一个逗号。这个问题在除了 Firefox 以外的所有浏览器中都没有显示出来。我添加了逗号之后，问题得到了解决。

- tarquinwinot

4

我曾经遇到过同样的问题。我不得不创建一个名为“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");
}

- Octavian Vladu

3

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

我发现解决方案在于向.htaccess中添加以下声明。

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

found via

- davus

3

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

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

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

- Pierre

2

选定的解决方案的评论确实提到了Base64编码的解决方案。 - KG -

@KaushikGopal 我想这个答案在我发帖后被编辑过了。 - Pierre

3

我要提醒一下，如果字体文件名包含特定字符，则在Firefox浏览器中可能会出现问题。最近我遇到了一个名为“Modulus”的字体的问题，它的文件名为“237D7B_0_0”。将文件名中的下划线删除并更新CSS以匹配新的文件名即可解决此问题。其他具有类似字符的字体没有这个问题，这非常奇怪...可能是Firefox中的一个错误。我建议只使用字母数字字符作为文件名。

- niall.campbell

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

2

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

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

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

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

最后，如果所有这些都不起作用，请更新FireFox。我写这篇文章时假设您正在使用最新版本；但是您没有指定您正在检查的版本，所以这也可能是您的问题。

- Casey

实际上，您不应该使用Google Font API来做这件事。Firefox存在一个问题，如果您在本地安装了字体，则无法使用字体变体（斜体、粗体等）。我找到的唯一解决方法是通过带着笑脸的本地src声明去破坏它（当然，任何奇怪的字符都可以，只要让人感到愉快即可）。 - jason

这是一个指向错误报告的链接：http://code.google.com/p/googlefontdirectory/issues/detail?id=13 - jason

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Manuel · Accepted Answer

运行本地网站（`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编码 用于字体类型，虽然很丑但也可能有效。

这里提供了一篇很好的概述：这里

CSS @font-face 在 Firefox 中无法正常工作，但在 Chrome 和 IE 中可以。

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

已发布网站

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