有没有办法在Firefox中平滑字体图标？

Question

我正在使用图标。在Chrome和Opera上他们看起来很好。但是如果我尝试使用Firefox，如果font-size图标小于20px，它们看起来会非常模糊，而在30px之后它们看起来很平滑。有没有办法解决这个问题？
例如，通过旋转非常少量的图像可以修复图像调整大小导致模糊图像的Firefox问题。类似的东西可以应用于字体图标吗？

要查看它的外观，只需（使用firefox）到任何带有图标的网站（比如字体真棒），并尝试将它们调整为20px，看看它们变得多么模糊。

Answer 1

问题来自浏览器使用的字体呈现。不同平台使用不同的方法。浏览器选择使用OS方法或他们自己的实现。

Chrome浏览器看起来更好的原因是因为Chrome在Windows上没有订阅ClearType。 IE和Firefox都使用它（检查此开始 - ＆gt;调整ClearType文本并打开和关闭它以查看差异）。但是Mac和Linux上的Firefox不会在那里使用它，因为它只是一种Windows技术。

Chrome在此特定问题上有优势，因为它并未使用ClearType，它在所有三个平台上都使用DirectWrite。这意味着无论您使用什么操作系统，Chrome中的任何都应该看起来相同。

为什么这很重要？因为您无法控制用户的计算机。您无法强制关闭ClearType，也无法更改用户的ClearType设置。用户可能会更改其ClearType设置，无论如何都会破坏您使用text-shadow进行的任何精细细节，以使其正常工作。

使用cufon可能会更好运，但这绝不是一件肯定的事。

我想要的解决方案是使用这些图标的图像。这样我就可以确定无论您使用什么来查看图标，它们对每个人都是一样的。

Answer 2

OS X的一个很好的解决方法是使用文本渲染和平滑属性。

body {
 text-rendering: auto;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}

这在网络字体方面也很有用。

Answer 3

我发现在使用谷歌字体时偶尔会覆盖字体样式，字体会显示为粗体。这个组合对我来说效果很好。

.element {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal !important;
}