Firefox CSS @ font-face怪癖 [英] Firefox CSS @font-face quirks
问题描述
这里有个怪诞的地方。如果我将font-weight设置为粗体（在萤火虫），它将工作，如果我把它设置恢复正常，它将返回。
如果我编辑font-face在萤火虫它会立即工作 - 即使我把它放回原来的位置。
例如：
@ font-face {
font-family：PlayBold;
src：url（Play-Bold-webfont.eot）;
src：url（Play-Bold-webfont.eot？#iefix）格式（'embedded-opentype'），
url（Play-Bold-webfont.woff）格式（'woff'），
url（Play-Bold-webfont.ttf）格式（'truetype'），
url（Play-Bold-webfont.svg＃PlayBold）format（'svg'）;
font-weight：normal;
font-style：normal;
font-variant：normal;
}
#testtext {
font-family：PlayBold;
结果：不使用字体。
进入firebug并更改字体的任何内容（即使只是替换一个具有相同字符的字符），它就会重新开始工作。
为什么firefox不能正常加载font-face？
Chromium 28，firefox 22。
等待网页字体完成下载。当每个web
字体完成下载时，Gecko更新使用该字体的文本。
这允许用户更快地阅读页面上的文本。
https://developer.mozilla.org/en-US/docs/Web/CSS/@font-
$ b
$ b
- 改变字体格式可能首先要把TTF或WOFF放到
- 中去掉font-variant：normal;从@ font-face声明，因为它不属于那里
- 正确地引用您的css url（file.ttf） - > url（'file.ttf'）中的uri
-
〜最后的手段〜使用一个数据uri生成器并将字体嵌入到CSS中
$ b $ s < data：application / octet-stream; base64，BLAHBLAHBLAH =='）format（'embedded-opentype'），
So I have an @font-face setup that works in everything but firefox - a common occurance according to google.
Here's the quircky bit. If I set the font-weight to bold (in firebug) it will work, if I set it back to normal it will return.
If I edit the font-face in firebug it will work instantly - even if I put it back to what it was in the first place.
eg:
@font-face {
font-family: PlayBold;
src: url(Play-Bold-webfont.eot);
src: url(Play-Bold-webfont.eot?#iefix) format('embedded-opentype'),
url(Play-Bold-webfont.woff) format('woff'),
url(Play-Bold-webfont.ttf) format('truetype'),
url(Play-Bold-webfont.svg#PlayBold) format('svg');
font-weight: normal;
font-style: normal;
font-variant: normal;
}
#testtext {
font-family: PlayBold;
}
Result: Not using the font.
Go into firebug and change anything in the font-face (even just replacing a character with the same character it used to have) and it starts working again.
Why doesn't firefox load the font-face properly in the first place?
Chromium 28, firefox 22.
解决方案
When Gecko displays a page that uses web fonts, it initially displays
text using the best CSS fallback font available on the user's computer
while it waits for the web font to finish downloading. As each web
font finishes downloading, Gecko updates the text that uses that font.
This allows the user to read the text on the page more quickly.
https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face
THINGS TO TRY:
- shuffling the font formats around, possibly putting the TTF or WOFF first
- removing "font-variant: normal;" from the "@font-face" declaration because it doesn't belong there
- properly quote the uri's in your css url(file.ttf) -> url('file.ttf')
~last resort~ use a data uri generator and embed the fonts into the CSS
src: url('data:application/octet-stream;base64,BLAHBLAHBLAH==') format('embedded-opentype'),
这篇关于Firefox CSS @ font-face怪癖的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
