CSS @ font-face不适用于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起源”（）文件策略：要使其具有与其他浏览器一样的性能，请转到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>

您可能想要尝试将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

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

这是可在firefox上使用的解决方案的示例，您需要将此行添加到字体CSS中：

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

我将其留在这里，是因为我的同事找到了一个相关的“字体不能在Firefox上使用，但在其他地方都可以使用”问题的解决方案。

问题出在Firefox弄乱了font-family声明，这最终解决了它：

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

PS：我也在使用html5boilerplate。

我遇到了同样的问题。使用@ font-face规则仔细检查代码中的H1，H2或您要定位的任何样式。font-family: 'custom-font-family' Arial, Helvetica etc在除Firefox之外的所有浏览器中都能正常显示它之后，我发现自己没有出现昏迷。我加了昏迷，它奏效了。

我有完全一样的问题。我必须创建一个名为“ fonts”的新文件夹，并将其放在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");
}

我在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，请在字体工具包生成器中选择“ 专家模式”，向下滚动并在“ CSS选项”下选择“ Base64 Encode ”。 -下载的Font-Kit将可以即插即用。

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

我曾提到过，如果某些字体的文件名包含特定字符，则它们在firefox中会出现问题。我最近遇到了文件名为'237D7B_0_0'的'Modulus'字体问题。删除文件名中的下划线并更新css以匹配新文件名即可解决此问题。其他具有类似字符的字体则没有这个问题，这很好奇...可能是firefox中的错误。我建议将文件名仅保留字母数字字符。

特别是对于这种字体，您应该使用Google Font 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 Font API中存在一个已知的错误，如果该字体是在本地安装的，则该字体会阻止使用字体的变体，并且与定义的本地名称匹配：

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

为了有效地削弱本地声明，只需使本地源字符串变得毫无意义。通常公认的惯例是使用笑脸unicode字符（"☺"）。为什么？保罗·爱尔兰（Paul Irish）在他的博客上做了一个很好的解释：

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

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

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

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

另外，我还要注意您可能需要第二个@ font-face规则中的font-weight：bold。

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

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

我遇到同样的问题，无法在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);
}

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

如果您尝试导入外部字体，则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

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

希望能有所帮助！

这是您如何设置字体的路径的问题。由于您未使用“ /”开始路径，因此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";
}

试试这个....

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

我有一个类似的问题。即使所有文件都来自同一域，fontsquirel演示页面也可以在FF中运行，但不能在我自己的页面上运行！

原来，我是用绝对URL（http://example.com/style.css）链接样式表，因此FF认为它来自其他域。将样式表链接href更改为/style.css可以为我解决问题。

也许您的问题是一个命名问题，特别是在使用（或不使用）空格和连字符方面。

我遇到了类似问题，我以为我已经通过放置可选件解决了在字体/家族名称周围引号（'）来解决此问题，但这实际上隐式解决了命名问题。

我还没有完全了解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;

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

我发现本文有助于理解其中涉及的某些方面：http : //mathiasbynens.be/notes/unquoted-font-family

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

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

这个

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

变成这个

body {font-family: DroidSerifRegular, serif; }

就我而言，我喜欢插入字体样式代码的问题

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

因此，这是针对该问题的Google最高结果之一，我想补充一下为我解决此问题的内容：

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

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

尝试从Tool bar 西方到Unicode

View > Text Encoding > Unicode

我遇到了同样的问题，并通过添加内容的meta解决了这个问题：

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

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

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

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

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

我的问题是Windows将字体命名为“ font.TTF”，firefox期望使用“ font.ttf”，我发现在Linux中打开项目后，将字体重命名为propper name，一切正常