196

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

4

30 回答 30

238

本地运营网站 ( file:///)

file:///默认情况下，about:configFirefox带有非常严格的“文件 uri 来源” 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 编码，虽然丑陋但它也可能有效。

这里有一个很好的回顾

于 2010-09-13T21:31:15.603 回答
42

除了将以下内容添加到您的 .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
于 2012-03-05T17:02:39.933 回答
16

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

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

src: local(font name), url("font_name.ttf");
于 2012-07-18T17:37:34.903 回答
4

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

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

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

PS：我也在使用 html5boilerplate。

于 2012-02-27T18:27:13.207 回答
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");
}
于 2013-03-05T08:04:15.537 回答
4

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

于 2011-11-16T11:50:36.733 回答
3

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

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

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

于 2011-07-26T13:22:48.950 回答
3

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

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

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

通过找到

于 2011-05-23T19:39:47.180 回答
3

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

于 2012-07-17T23:02:43.237 回答
2

尝试削弱@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

于 2010-09-18T22:58:58.503 回答
2

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

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

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

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

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

于 2010-09-15T07:58:24.997 回答
1

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

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

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

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

于 2010-05-18T15:14:46.027 回答
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);
}

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

于 2014-04-05T20:49:13.910 回答
1

这是您如何设置字体路径的问题。由于您没有以“/”开头的路径，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";
}
于 2010-09-13T22:00:25.580 回答
1

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

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

于 2012-07-25T21:14:44.713 回答
1

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

这种类型的错误有很多原因，这个问题背后的最大原因之一是以前的每个定义的字体。您需要在每行 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

于 2018-01-11T04:45:01.707 回答
0

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

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

我并不完全了解 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 的详细信息，以及一些指向 Adob​​e 规范 PDF 的链接： http ://rachaelmoore.name/posts/design/css/find-font-name-css-family-stack/

于 2012-11-24T15:47:53.040 回答
0

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

希望它有帮助！

于 2010-09-12T22:54:59.630 回答
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 页面的标题中，在样式标记中直接。为我工作！

于 2013-11-01T16:33:32.190 回答
0

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

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

于 2012-03-08T17:16:10.317 回答
0

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

这个

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

变成这个

body {font-family: DroidSerifRegular, serif; }
于 2012-12-08T08:50:36.387 回答
0

尝试这个....

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

于 2011-09-13T01:45:02.013 回答
0

因此，这是该问题的最佳 Google 结果之一，我想添加为我解决此问题的内容：

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

于 2016-01-04T09:35:59.447 回答
0

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

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

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

于 2018-01-11T10:12:51.050 回答
0

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

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

fontspring的相关文章

于 2021-09-30T08:52:33.223 回答
0

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

试试这个从Tool bar 西方到Unicode

View > Text Encoding > Unicode
于 2017-05-27T07:27:35.447 回答
0

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

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

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

  • cursive
  • fantasy
  • monospace
  • sans-serif
  • serif
  • system-ui

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

于 2022-01-07T06:33:27.493 回答
-2

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

于 2013-05-11T17:47:20.773 回答
-2

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

于 2011-11-01T14:05:08.147 回答
-2

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

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

于 2010-05-18T11:34:55.490 回答