如何修复Firefox 3.5中的@ font-face故障

时间:2009-09-14 10:40:49

标签: html css fonts font-face firefox3.5

在现有代码中,我使用了.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字体。

其次,更令人不安的是以下行为:

在显示嵌入式ttf字体之前,Firefox会将默认字体闪烁半秒!

这看起来真的很蠢。

就第二个问题而言,我希望可能有一个解决方法的原因是,使用Cufon嵌入字体时,存在完全相同的问题。但是,它们提供了在关闭</body>标记之前调用的Cufon.now()JS函数,并解决了它们的问题。 SHould可能已经看过该函数的JS代码,但我几乎不是这方面的专家。

IE或Safari中也没有相同的默认字体闪烁。

2 个答案:

答案 0 :(得分:0)

如果您只在标题和少量文字中使用非标准字体,我建议您使用sIFR。这个小JavaScript / Flash库的工作原理是用一个小的轻量级flash对象替换select元素,它在所有浏览器中显示相同的字体...你甚至可以选择sIFR生成的字体,就像你在其上的任何其他文本一样网页。

查看example page

答案 1 :(得分:-2)

对于斜体,您需要添加

@font-face {
  font-family: ...;
  src: url(...);
  font-style: italic;
}