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

标签 css firefox fonts icons font-smoothing

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

要查看它的外观,只需转到(使用 firefox)任何带有图标(如 font awesome)的网站,然后尝试将它们的大小调整为 20px,看看它们变得多么模糊。

最佳答案

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

它在 Chrome 中看起来更好的原因是 Chrome 没有订阅 Windows 上的 ClearType。 IE 和 Firefox 都使用它(检查这个 Start -> Adjust ClearType Text 并打开和关闭它以查看区别)。但是 Mac 和 Linux 上的 Firefox 不会在那里使用它,因为它是一种仅限 Windows 的技术。

Chrome 在这个特殊问题上有优势,因为它不使用 ClearType,而是使用 DirectWrite在所有三个平台上。这意味着无论您使用何种操作系统,Chrome 中的任何内容都应该看起来是一样的。

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

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

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

关于css - 有没有办法在 Firefox 中平滑字体图标?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28008945/

相关文章:

html - HTML 流之外的神秘空白?

javascript - 您如何处理具有不同高度的布局列?

javascript - jQuery:动画背景图像

javascript - jQueryui 可拖动项类

javascript - Firefox 中的 localStorage 不可靠

html - 当我指定了 sans-serif 时,如何阻止 Yahoo 在 HTML 电子邮件中显示衬线字体?

css - Firefox 1.5 和 2 css 绝对位置错误

javascript - CKEditor 在 IE 和 FF 中省略空格

android - indic-text-renderer 使用 harfbuzz 和 freetype

css - 不显示 CSS 中的字体变体