如何修复 Firefox 3.5 中的 @font-face 故障
在现有代码中，我对 .EOT 嵌入字体进行了 CSS @font-face 声明，这些声明实际上在 Internet Explorer 中完美运行。所以现在我读到 Firefox 现在也嵌入了，在 3.5 中，除了它直接嵌入 .ttf 字体。所以我改变了 Firefox 的 @font-face 声明并试了一下：
@font-face {
font-family: FontX;
src: url("FontX.eot"); //previous decl.
src: local("FontX"), url("FontX.ttf") format("truetype");
}
它有效 - 但很难完美。
首先，斜体和粗体不会显示在页面上，尽管它们以前使用 .EOT 字体时会显示。
其次，更令人不安的是以下行为：
Firefox 在显示嵌入的 ttf 字体之前闪烁默认字体半秒！
这看起来真的很愚蠢。
至于第二个问题，我希望可能有解决办法的原因是 Cufon嵌入字体，也存在完全相同的问题。但是，他们提供了在结束 标记之前调用的 Cufon.now() JS 函数，这为他们解决了问题。可能应该已经看过该函数的 JS 代码，但我并不是这方面的专家。
此外，IE 或 Safari 中也不存在相同的默认字体闪烁。
In existing code I had CSS @font-face declarations for .EOT embedded fonts that worked flawlessly actually, in internet explorer. So now I read that Firefox does embedded now too, in 3.5, except it embeds .ttf fonts directly. So I altered the @font-face declaration for firefox and gave it a shot:
@font-face {
font-family: FontX;
src: url("FontX.eot"); //previous decl.
src: local("FontX"), url("FontX.ttf") format("truetype");
}
It works - but hardly flawlessly.
First, the italic and bold don't show up on the page, though they did previously with the .EOT font.
Secondly and more disturbing is the following behavior:
Firefox flashes the default font for a half second before displaying the embedded ttf font!
This looks really really dumb.
As far as this second problem, the reason I'm hoping there might be a work around is that with Cufon embedded fonts, there is the exact same problem. However, they provide the Cufon.now() JS function you call right before the closing </body> tag and that solves the problem for them. SHould probably have already taken a look at the JS code for that function but am hardly an expert at any of this.
Also that same default font flashing is not present in IE or Safari.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
如果您仅在标题和少量文本中使用非标准字体，我建议使用 sIFR 。这个小型 JavaScript/Flash 库的工作原理是用一个小型轻量级 Flash 对象替换选择元素，该对象在所有浏览器中显示相同的字体...您甚至可以选择 sIFR 生成的字体，就像您选择 sIFR 上的任何其他文本一样。网页。
查看示例页面。
If you are only using non-standard fonts in headers and small amounts of text, I'd recommend using sIFR. This little JavaScript/Flash library works by replacing select elements with a small light-weight flash object, which displays your fonts the same across all browsers... You can even select the fonts sIFR generates, just as you would any other text on your webpage.
Take a look at the example page.
对于斜体，您需要添加
For italic, you need to add