CSS Firefox webfonts 未加载
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6541885/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Firefox webfonts not loading
提问by user127181
I'm having an issue with webfonts only in Firefox, all other browsers (including IE) work perfectly.
我只在 Firefox 中遇到 webfonts 问题，所有其他浏览器（包括 IE）都可以完美运行。
My issues is that the webfonts won't load at all.
我的问题是 webfonts 根本无法加载。
I've looked at this possible solution, editing the htaccess file (http://www.fontsquirrel.com/blog/2010/11/troubleshooting-font-face-problems) but I've had no luck.
我查看了这个可能的解决方案，编辑了 htaccess 文件（http://www.fontsquirrel.com/blog/2010/11/troubleshooting-font-face-problems），但我没有运气。
The only other thing that I can say is in Firefox's error console I get the following warning:
我唯一能说的就是在 Firefox 的错误控制台中，我收到以下警告：
Error in parsing value for "src". Skipped to the next declaration.
解析“src”的值时出错。跳到下一个声明。
Here's a sample of my font-facecode:
这是我的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;
}
Any ideas?
有任何想法吗？
回答by rjb
In my experience, Firefox is picky about expecting quotes in @font-facerules:
根据我的经验，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;
}
回答by Ric
There can also be cross domain issues with fonts in Firefox. See: http://www.cssbakery.com/2010/07/fixing-firefox-font-face-cross-domain_25.html
Firefox 中的字体也可能存在跨域问题。参见：http: //www.cssbakery.com/2010/07/fixing-firefox-font-face-cross-domain_25.html
回答by AinStain
i run into the same problem the last days. found a lot of tips and solutions, but none of them worked for me. then i used the buildin webdeveloper console (strg+shift+k) instead of firebug and voila, i see the error:
我在最后几天遇到了同样的问题。找到了很多技巧和解决方案，但没有一个对我有用。然后我使用了内置的 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]
yes, a 401 error, because the page is located behind a htaccesslogin! when i disable the htaccess authorization, everything works fine!
是的，401 错误，因为该页面位于htaccess登录后面！当我禁用 htaccess 授权时，一切正常！
thats of course only a workaround and no solution, but, before you get crasy about that sh*t like i did, watch out if your site is behind a htaccess login. that could save you a lot of time ;)
那当然只是一种解决方法，没有解决方案，但是，在您像我一样对那个 sh*t 感到疯狂之前，请注意您的网站是否在 htaccess 登录之后。这可以为您节省很多时间；）
another problem you can run into: http & httpsif you use both protocols on your site, embed the fonts like this:
您可能会遇到的另一个问题：http 和 https如果您在站点上同时使用这两种协议，请像这样嵌入字体：
src: url('//www.example.com/fonts/webfont.eot');
instead of this:
而不是这个：
src: url('http://www.example.com/fonts/webfont.eot');
hope that helps someone. i lost a lot of time because of this &$!§%&#*
希望能帮助某人。因为这个，我浪费了很多时间 &$!§%&#*
回答by jadefoxxx
Ha, I sat for ages trying to figure this out - for me, the fix was in calling each src separately - i.e, instead of this (fontsquirrel generated code):
哈，我坐了很久试图解决这个问题 - 对我来说，解决方法是分别调用每个 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;
}
I did this:
我这样做了：
@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;
}
If you look, the fontsquirrel code actually has a ';' where there should be a ',' but just fixing that didn't help. For some reason, closing all the src's with semi-colons did the job when nothing else would.
如果你看，fontsquirrel 代码实际上有一个“;” 应该有一个 ',' 的地方，但只是修复并没有帮助。出于某种原因，用分号关闭所有 src 可以完成这项工作，而其他任何事情都做不到。
回答by My1
some issue I also experienced multiple times is the about:config setting gfx.downloadable_fonts.enabled that when set to false the client wont download any fonts, making webmailers with webfont icons pretty bad, as I have seen with yahoo and office 365 webmails...
我也多次遇到的一些问题是 about:config 设置 gfx.downloadable_fonts.enabled 当设置为 false 时，客户端不会下载任何字体，这使得带有 webfont 图标的 webmailers 非常糟糕，正如我在 yahoo 和 office 365 webmails 中看到的那样。 .
回答by Fabien Nguyen
I've just had the same problem. The problem was a slight difference in the names of the fonts. There was a different typography in the font-family attribute in @font-face and the one I used in the class using this font. Apparently, the computer web browsers are more permissive than the tablets' ones.
我刚刚遇到了同样的问题。问题是字体名称略有不同。@font-face 中的 font-family 属性和我在课堂上使用这种字体的字体有不同的排版。显然，计算机网络浏览器比平板电脑的浏览器更宽松。
回答by Patrick Hazard
After scouring stackoverflow trying every suggestion and not having them work I found out what was wrong with my code that after fixing, made it work. I had left out the commas between font declarations.
在搜索 stackoverflow 尝试了每一个建议并且没有让它们工作之后，我发现了我的代码有什么问题，在修复后使它工作。我省略了字体声明之间的逗号。
I had
我有
font-family: "GiveMeTime" sans-serif;
instead of
代替
font-family: "GiveMeTime", sans-serif;
and as it worked in every other browser I didn't notice the error. Anyone else with this problem, check it's not a simple font stack error!
因为它在其他所有浏览器中都有效，所以我没有注意到错误。其他遇到此问题的人，请检查这不是简单的字体堆栈错误！
