Question

我只在Firefox中遇到webfonts的问题，所有其他浏览器（包括IE）都能正常运行。

我的问题是webfonts根本不会加载。

我看过这个可能的解决方案，编辑htaccess文件（http://www.fontsquirrel.com/blog/2010/11/troubleshooting-font-face-problems），但我没有运气。

我唯一可以说的是在Firefox的错误控制台中我收到以下警告：

解析“src”的值时出错。跳到下一个宣言。

以下是我的font-face代码示例：

@font-face {
    font-family:AngelinaRegular;
    src:url(../fonts/angelina-webfont.eot);
    src:url(../fonts/angelina-webfont.eot?iefix) format(eot), url(../fonts/angelina-webfont.woff) format(woff), url(../fonts/angelina-webfont.ttf) format(truetype), url(../fonts/angelina-webfont.svg#webfontOvuhCGpN) format(svg);
    font-weight:normal;
    font-style:normal;
}

有什么想法吗？

Answer 1

根据我的经验，Firefox对@font-face规则中的引号有所挑剔：

@font-face {
    font-family: AngelinaRegular;
    src: url('../fonts/angelina-webfont.eot');
    src: url('../fonts/angelina-webfont.eot?#iefix') format('embedded-opentype'),
        url('../fonts/angelina-webfont.woff') format('woff'),
        url('../fonts/angelina-webfont.ttf') format('truetype'),
        url('../fonts/angelina-webfont.svg#webfontOvuhCGpN') format('svg');
    font-weight: normal;
    font-style: normal;
}

Answer 2

Firefox中的字体也可能存在跨域问题。请参阅：http://www.cssbakery.com/2010/07/fixing-firefox-font-face-cross-domain_25.html

Answer 3

我在最后几天遇到了同样的问题。找到了很多技巧和解决方案，但没有一个能为我工作。然后我使用buildin webdeveloper控制台（strg + shift + k）而不是firebug和voila，我看到错误：

[14:18:36.161] GET http://www.example.com/font/fontawesome-webfont.ttf?v=3.2.0 [HTTP/1.1 401 Authorization Required 21ms]

是的，401错误，因为该页面位于 htaccess 登录后面！当我禁用htaccess授权时，一切正常！

这当然只是一种解决方法而且没有解决方案，但是，在你像我这样做之前，请注意你的网站是否落后于htaccess登录。这可以节省你很多时间;）

您可能遇到的另一个问题： http＆amp; HTTPS 如果您在自己的网站上使用这两种协议，请嵌入以下字体：

src: url('//www.example.com/fonts/webfont.eot');

而不是：

src: url('http://www.example.com/fonts/webfont.eot');

希望有人帮助。由于这个＆amp; $！§％＆amp;＃*
，我失去了很多时间

Answer 4

哈，我坐了好几年试图解决这个问题 - 对我来说，修复是分别调用每个src - 即，而不是这个（fontsquirrel生成的代码）：

@font-face {
    font-family: 'comic_bookregular';
    src: url('comic_book-webfont.eot');
    src: url('comic_book-webfont.eot?#iefix') format('embedded-opentype'),
         url('comic_book-webfont.svg#comic_bookregular') format('svg');
         url('comic_book-webfont.woff') format('woff'),
         url('comic_book-webfont.ttf') format('truetype'),

font-weight: normal;
font-style: normal;

}

我这样做了：

@font-face {
  font-family: 'comic_bookregular';
    src: url('../fonts/comic_book-webfont.eot');
    src: url('../fonts/comic_book-webfont.eot?#iefix') format('embedded-opentype');
    src: url('../fonts/comic_book-webfont.svg#comic_bookregular') format('svg');
    src: url('../fonts/comic_book-webfont.woff') format('woff');
    src: url('../fonts/comic_book-webfont.ttf') format('truetype');

  font-weight: normal;
  font-style: normal;

  }

如果你看一下，fontsquirrel代码实际上有一个＆＃39 ;;＆＃39;那里应该有一个＆＃39;，＆＃39;但只是修复它并没有帮助。出于某种原因，用半冒号关闭所有src并没有别的办法。

Answer 5

我经历过多次的一些问题是about：config设置gfx.downloadable_fonts.enabled当设置为false时，客户端不会下载任何字体，使webfiler的webfont图标非常糟糕，正如我在雅虎和Office 365中看到的那样提醒服务...

Answer 6

在搜索stackoverflow尝试每个建议并且没有让它们工作之后我发现我的代码在修复之后出了什么问题，使其工作。我在字体声明之间省略了逗号。

我有

font-family: "GiveMeTime" sans-serif;

而不是

font-family: "GiveMeTime", sans-serif;

并且因为它在其他浏览器中工作，我没有注意到错误。有这个问题的其他人，检查它不是一个简单的字体堆栈错误！

Answer 7

我遇到了同样的问题。问题是字体名称略有不同。 @ font-face中的font-family属性和我使用此字体在类中使用的排版有不同的排版。显然，计算机网络浏览器比平板电脑更容易接受。的。

Firefox webfonts无法加载

7 个答案: