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

Question

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

要查看它的外观，只需（使用 firefox）访问任何带有图标（如 font awesome）的网站，然后尝试将它们调整为 20 像素，看看它们变得多么模糊。

Answer 1

The problem is coming from the font rendering that browsers use. Different platforms use different methods. Browsers opt to use the OS method or their own implementation.

The reason it looks better in Chrome is because Chrome doesn't subscribe to ClearType on Windows. IE and Firefox both do use it (to check this Start -> Adjust ClearType Text and toggle it on and off to see the difference). But Firefox on Mac and Linux won't use it there because it is a Windows only technology.

Chrome has the upperhand on this particular problem because it doesn't use ClearType it uses DirectWrite on all three platforms. This means that anything should look the same in Chrome no matter what OS you're on.

Why does this matter? Because you're not in control of the user's computer. You cannot force ClearType off, you cannot alter the user's ClearType settings. A user might change their ClearType settings anyway ruining any fine detailing you might do using text-shadow to make it work.

You might get better luck using cufon for this but it's by no means a sure thing.

The solution I'd go for is using images for these icons. That way I'll know for sure that no matter what you're using to view the icons, they will be the same for everyone.

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;
}