Firefox 网络字体未加载

Posted 2023-03-06

【中文标题】Firefox 网络字体未加载

【英文标题】：Firefox webfonts not loading

【发布时间】：2011-09-26 09:07:01

【问题描述】：

我只在 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;

有什么想法吗？

【参考方案1】：

我也遇到了同样的问题。问题是字体名称略有不同。 @font-face 中的 font-family 属性和我在课堂上使用这种字体的字体不同。 显然，计算机网络浏览器比平板电脑的浏览器更宽松。

【参考方案2】：

我也多次遇到的一些问题是 about:config 设置 gfx.downloadable_fonts.enabled 当设置为 false 时客户端不会下载任何字体，这使得带有 webfont 图标的 webmailer 非常糟糕，正如我在 yahoo 和 office 365 中看到的那样网络邮件...

【参考方案3】：

在对 *** 进行了搜索并尝试了每一个建议但没有让它们发挥作用后，我发现我的代码出了什么问题，在修复之后，它就可以工作了。我省略了字体声明之间的逗号。

我有

font-family: "GiveMeTime" sans-serif;

而不是

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

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

【参考方案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 代码实际上有一个';'应该有一个'，'但只是修复它并没有帮助。出于某种原因，用分号关闭所有 src 就可以完成这项工作。

【参考方案5】：

我在最后几天遇到了同样的问题。 找到了很多提示和解决方案，但没有一个对我有用。 然后我使用了内置 webdeveloper 控制台（strg+shift+k）而不是 firebug 和瞧，我看到了错误：

[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 授权时，一切正常！

这当然只是一种变通方法，没有解决方案，但是，在您像我一样对那个 sh*t 感到疯狂之前，请注意您的网站是否在 htaccess 登录之后。这可以为您节省大量时间；）

您可能会遇到的另一个问题：http & https 如果您在网站上同时使用这两种协议，请嵌入如下字体：

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

而不是这个：

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

希望对某人有所帮助。我因此浪费了很多时间 &$!§%*

【参考方案6】：

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

【参考方案7】：

根据我的经验，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;

【讨论】：

原来是这样，谢谢大家的帮助。

不要忘记在format()!中添加引号：)