logo标签列表

Firefox网页字体未加载

firefoxcssfont-face
19

我在Firefox中遇到了网页字体的问题，其他浏览器（包括IE）都可以正常工作。

我的问题是这些网页字体根本不会加载。

我查看了可能的解决方案之一，编辑htaccess文件（http://www.fontsquirrel.com/blog/2010/11/troubleshooting-font-face-problems），但是我没有成功。

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

Error in parsing value for "src". Skipped to the next declaration.

以下是我的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;
}

有什么想法吗？

7个回答
30

根据我的经验，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;
}
2
不要忘记在 format() 中也加上引号！ :) - m93a
10
1
我最近遇到了同样的问题。 找到了很多提示和解决方案，但是它们都没有对我起作用。 然后我使用了内置的Web开发者控制台（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授权时，一切正常！这当然只是一个解决方法而不是解决方案，但在你像我一样疯狂之前，请注意你的网站是否在htaccess登录后面。这可以节省很多时间；）
另一个可能遇到的问题是：http和https。如果您在站点上同时使用这两种协议，请按以下方式嵌入字体：
src: url('//www.example.com/fonts/webfont.eot');

而不是这样：

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

希望这能帮助到某些人。由于这个问题，我浪费了很多时间。
1

嘿，我花了很长时间才弄明白这个问题 - 对我而言，解决方法是分别调用每个src - 即，不是这样（font squirrel生成的代码）：

@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用分号关闭可以解决问题，而其他方法则无法解决。

1

我也遇到过一些问题，关于设置“about:config”的gfx.downloadable_fonts.enabled，当设置为false时，客户端将不会下载任何字体，这使得使用Web字体图标的Web邮件非常糟糕，就像我在雅虎和Office 365 Web邮件中看到的那样...

0
在搜索了StackOverflow并尝试了每一个建议但都没有成功后，我终于找到了我的代码的问题所在，并加以修复，最终让它正常工作了。原来是我在字体声明中漏掉了逗号。
我忘记了逗号。
font-family: "GiveMeTime" sans-serif;

替代

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

由于在其他浏览器中都能正常工作，我没有注意到这个错误。如果还有其他人遇到这个问题，请检查一下是否是简单的字体堆栈错误！

0
我刚遇到了同样的问题。问题在于字体名称略有不同。@font-face 中的 font-family 属性和使用此字体的类中使用的字体存在不同的排版。 显然，计算机网络浏览器比平板电脑的浏览器更宽容。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接