如何在IE和FF中防止位图字体的抗锯齿

Question

我有一个基本的图标位图字体。

它在Chrome中很清晰，但IE和FF中的字体平滑使图标看起来模糊。

有关如何解决该问题的任何建议？

截图：http://imgur.com/TX79g

字体用http://fontstruct.com

创建@使用最佳设置由http://www.fontsquirrel.com/fontface/generator生成字体面。也试过专家去除字体暗示相同的结果。

谢谢。

Answer 1

为什么要使用字体？您可以使用与CSS sprite strips相结合的图像来获得相同的效果。它可能会使它更多地跨浏览器和更小的请求大小。

如果您将某个类的CSS属性设置为图标，您可以简单地在该类中添加一个或者一个HTML文件，并使图标以奇迹般的形式出现。

编辑： 如果您需要各种各样的颜色，一种方式做这将是在一个背景颜色使用透明面罩：http://jsfiddle.net/Z5RvT/1/

Answer 2

它在不同的浏览器文本渲染做和操作系统。我相信webkit浏览器（Safari和Chrome）的默认值是subpixel-antialiased。您可以尝试使用font-smooth css属性，尽管我不确定它支持多大。 Typekit在文本渲染上有一堆articles，您可能希望看一看，但如果您在多个浏览器中寻找非常一致的外观，最佳选择是图像精灵。