有没有办法在火狐中平滑字体图标

Question

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

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

Answer 1

问题来自浏览器使用的字体渲染。不同的平台使用不同的方法。浏览器选择使用操作系统方法或自己的实现。

它在Chrome中看起来更好的原因是Chrome没有在Windows上订阅ClearType。IE和Firefox都使用它（检查此开始 ->调整ClearType Text并打开和关闭它以查看差异）。但是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;
}