是否有方法在Firefox中平滑字体图标？

Question

是否有方法在Firefox中平滑字体图标？

14

我正在使用图标。在 Chrome 和 Opera 中它们看起来很好。但是如果我尝试 Firefox，如果图标的 font-size 小于 20px，它们会变得相当模糊，而在 30px 之后它们看起来就比较平滑了。有没有办法解决这个问题呢？
例如，在 Firefox 中调整图像大小导致图像变得模糊的问题可以通过微调图像进行旋转来解决。是否可以将类似的方法应用于字体图标？

要查看其外观，请（在 Firefox 中）转到带有图标的任何网站（如 font awesome），然后尝试将它们的大小调整为 20px，并观察它们变得多么模糊。

- Core_dumped

我实际上无法重现这个问题。我在Chrome和Firefox中比较FontAwesome网站（默认字体大小为14px），只有当我眯着眼睛看图标时才能注意到任何区别，而且足球可能有2个像素的偏差。您遇到的是这个问题还是有更具体的例子？ - gewh

非常奇怪 - 我在Windows 7上得到了默认的ClearType渲染，就像gewh一样。我可以想象你在OSX上默认会得到AA，这可能会模糊一些细节。真的不知道该建议什么 - 你改变了ClearType调整设置吗？或者启用了任何辅助功能设置？你有另一个Win7盒子来测试吗？ - Octopoid

你能否更新帖子并附上问题的截图吗？这样我们就可以将其与我们的渲染进行比较了。 - Octopoid

你从未见过边框上的像素化图标吗？ - Core_dumped

这种事情很难用言语解决。发一下截图，我们可以告诉你是否看到了同样的问题。 - Octopoid

顺便提一下，我尝试将字体大小设置为21像素 - 模糊已消失 :D - Core_dumped

3个回答

2

优化OS X的方法是使用文本渲染和平滑属性。

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

这对于网络字体也同样适用。

- James George Dunn

虽然这对于OSX平滑处理是正确的，但问题只在Windows 7上的Firefox中显示。 - Octopoid

@Octopoid同意。有用和有趣的信息，但最好作为评论提供。 - Clarus Dignus

0

我发现有时候使用谷歌字体时，字体样式会被覆盖，导致字体看起来加粗。但是这种组合对我来说效果很好。

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

- whoacowboy

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- gewh · Accepted Answer

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

Chrome看起来更好的原因是因为Chrome在Windows上不使用ClearType。IE和Firefox都使用它（要检查此内容，请先单击开始，然后调整ClearType文本并切换开关以查看差异）。但是，在Mac和Linux上，Firefox不会使用它，因为它是仅限Windows的技术。

Chrome在这个特定问题上具有优势，因为它在所有三个平台上都不使用ClearType，而是使用DirectWrite。这意味着无论您使用哪个操作系统，在Chrome中任何东西看起来应该都是相同的。

这很重要吗？因为您无法控制用户的计算机。您不能强制关闭ClearType，也不能更改用户的ClearType设置。用户可能会更改其ClearType设置，从而破坏您使用text-shadow进行的任何精细详细信息。

您可能会尝试使用cufon，但这并不是一件确定的事情。

我会选择使用图片来作为这些图标的解决方案。这样，无论你使用什么方式查看图标，每个人都能看到相同的图标。