@ font-face的CSS问题

时间:2011-09-14 00:41:34

标签: html css css3 fonts font-face

所以我是这个华而不实的新创网站的前端编码,我正在使用特定的字体。我正在使用@ font-face,字体显示在所有浏览器中,但有些问题:

1)字体看起来像素化,这有点难看。这个问题实际上发生在我之前使用其他字体,所以如果有人建议我如何使字体平滑,我会很高兴。

2)在Opera和Safari中,字体呈现正常(仍然是像素化的),但在IE,Firefox和Chrome中,它呈现出粗体,比平常更大胆。我尝试使用font-weight但字体不支持任何重量,所以这是正常的。关于这个问题的任何想法?

我真的很想要这种字体,我无法理解每个人如何使用font-face来解决所有渲染问题。我希望我错过了什么。

1 个答案:

答案 0 :(得分:1)

取决于您使用的操作系统,因为@ font-face使用OS字体渲染引擎。在Windows XP上忘记正确完成它。在IE7 / 8中,Windows 7也能很好地完成工作。

可能导致字体看起来呈锯齿状的一件事可能是Cleartype选项 - 关闭它会修复边缘,因为它不会执行不需要的额外抗锯齿,因为嵌入字体已经消除锯齿。

在客户端禁用cleartype 的一种方法是应用IE特定的filter:属性(只需使用一些简单的属性,这样除了触发效果之外它不会做任何事情 - 比如旋转0度)到css中的标题 - 这会导致IE关闭cleartype以避免过滤器渲染和Cleartype渲染之间的冲突。但这只会修复IE。

还有一个特定于webkit的-webkit-font-smoothing可以正常工作,可以帮助你使用chrome和css3 font-smooth(从未使用过这个,所以不能告诉你结果或支持的浏览器)。

如果您真的想要保留所选字体,那么您可以做的最实用的事情就是使用Cufon或类似的字体替换器。根据我的经验,它可以通过额外的脚本加载来完成工作。

总的来说,@ font-face没有可靠的解决方案让它在所有浏览器和系统上看起来都一样。