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

【问题标题】：Is there a way to smooth font icons in Firefox?有没有办法在 Firefox 中平滑字体图标？
【发布时间】：2015-01-29 06:44:01
【问题描述】：

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

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

【问题讨论】：

我实际上无法重现该问题。我正在比较 Chrome 和 FF 中的 FontAwesome 网站（默认字体大小为 14 像素），当我斜视图标时，我只能注意到任何差异，是的，足球有 2 个像素可能不合适。这是您遇到的问题还是您有更明确的示例？
很奇怪 - 我在 Windows 7 上得到了与 gewh 相同的默认 ClearType 渲染。我可能会想象你会默认在 OSX 上获得 AA，这会模糊一些细节。不确定该建议什么 - 您是否更改了 ClearType Tuning 设置，或启用了任何可访问性设置？你有另一个 Win7 机器来测试它吗？
你能用问题的截图更新帖子吗？然后我们可以将它与我们的渲染进行比较。
你没见过像素化的边框图标吗？
这种事情真的很难用语言来解决。发布该屏幕截图，我们可以告诉您我们是否看到相同的内容。

标签： css firefox fonts icons font-smoothing

【解决方案1】：

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

它在 Chrome 中看起来更好的原因是 Chrome 不订阅 Windows 上的 ClearType。 IE 和 Firefox 都使用它（检查此 Start -> Adjust ClearType Text 并打开和关闭它以查看差异）。但是 Mac 和 Linux 上的 Firefox 不会在那里使用它，因为它是一种仅限 Windows 的技术。

Chrome 在这个特殊问题上占上风，因为它不使用 ClearType，它在所有三个平台上都使用 DirectWrite。这意味着无论您使用什么操作系统，任何东西应该在 Chrome 中看起来都是一样的。

为什么这很重要？因为您无法控制用户的计算机。您不能强制关闭 ClearType，也不能更改用户的 ClearType 设置。用户可能会更改他们的 ClearType 设置，从而破坏您使用 text-shadow 进行的任何精细细节操作。

使用 cufon 可能会获得更好的运气，但这绝不是确定的事情。

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

【讨论】：

这个。如果您想100%确保它们对每个人都是一样的，那么图像是唯一的方法。 Cufon 将为您提供非常高水平的兼容性，但不是 100%。默认渲染可能看起来或可能不像您所期望的那样是您真正可以说的。通常没问题，但您总是要依赖某些默认操作系统和浏览器设置和行为。
我正在打开和关闭 Cleartype，页面上的文本发生了变化，但图标仍然像以前一样模糊，没有变化
它实际上正在发生。截图，放大。如果有橙色和蓝色 - ClearType 是打开的。
使用精灵似乎是唯一通用的解决方案。
在这种情况下，问题很可能是您的 PC，无论出于何种原因，都没有在 Firefox 中使用 ClearType。正如您所说，对于通用解决方案，它可以 100% 准确地再现 - 图像是唯一的方法。

【解决方案2】：

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

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

这也适用于网络字体。

【讨论】：

虽然这对于 OSX 平滑是正确的，但问题仅在 Firefox for Windows 7 上显示。
@Octopoid 同意。有用且有趣的信息，但最好作为评论提供。

【解决方案3】：

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

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

【讨论】：