Firefox 中的字体平滑答案

【问题标题】：Font-Smoothing in FirefoxFirefox 中的字体平滑
【发布时间】：2013-02-17 10:41:33
【问题描述】：

使用 Google WebFonts（在本例中为“Oswald”），我发现我的字体被渲染得比应有的更粗。我已经在基于 webkit 的浏览器中解决了这个问题：

-webkit-font-smoothing: antialiased;

但在 Firefox 中我找不到控制它的声明。我听说过使用text-shadow hack 来解决这个问题，但我不想使用它，因为它无疑会改变字体的几何属性。

这是它在 webkit (Chrome) 中的样子：

感谢 Firefox，这是块状可怕的渲染：

我知道有一种方法可以在 FireFox 中实现这一点，因为我在 font-combinator.com 上找到了这种字体，并且它在使用 Firefox 的 font-combinator 上正确呈现。这是通过 font-combinator.com 在 Firefox 上的样子：

在浏览用于创建字体组合器的 css 后，我发现了这个声明：text-rendering: optimizelegibility;，但这在应用于我的元素时不起作用。

我也试过了：

text-rendering: optimizeLegibility;
text-rendering: geometricPrecision;
font-smooth: always;
font-smooth: never;
font-smoothing: antialiased;
-moz-font-smoothing: antialiased;

如何让 Firefox 对我的字体进行抗锯齿处理，以使它们在显示时看起来正确？你能找到使它们在 www.font-combinator.com 上正确显示的声明或声明组合吗？

我使用的是相对旧版本的 FireFox (16.0.2)，因为这台机器安装了旧版本的 OSX。

【问题讨论】：

看起来不像渲染问题，您是在声明字体粗细吗？
body { font-weight:normal; } 感谢您的任何想法。
你能粘贴字体声明吗？
感谢您的想法@Boris Zbarsky。比较 Firefox 和 Chrome 时，页面上的其他字体也存在同样的问题。无论如何，我正在研究一种解决方法，因为 Firefox 似乎不支持像 -webkit-font-smoothing:antialiased; 这样的属性。请参阅：stackoverflow.com/questions/11459746/…。无论哪种情况，您是否介意删除您的评论以使我的域名不在留言板上？对此，我真的非常感激！感谢您的意见！
对于我来说，Firefox 和 Chrome 中的字体在 Mac 上看起来完全一样。如果您在 Windows 上，您是否只是看到 Direct2D 和 GDI 所做的字体渲染的差异？在任何情况下，正如我所说，“抗锯齿”行为是 Firefox 的默认行为......所以再一次，无论您看到什么都与字体平滑行为无关。

标签： css macos firefox fonts rendering

【解决方案1】：

这只是 OSX 上的 Firefox 问题...

我刚刚回答了这个问题：How to antialias SVG text in Firefox，并为您的问题提供了可能的解决方案。

我认为你可以使用以下属性：

-moz-osx-font-smoothing: grayscale;

这将与 firefox 25 一起发布（可以在 http://nightly.mozilla.org/ 找到每晚版本）

【讨论】：

我不同意。我只在 Firefox 上的 Windows 7 上遇到了这个问题（Chrome 和 IE 默认是流畅的，我不需要做任何事情）。我正在使用字体系列：Bitter, Georgia, serif

【解决方案2】：

您是否尝试过声明数字字体粗细而不仅仅是“正常”或“粗体”？不同浏览器对webfonts的渲染有很多不同。

尝试将 {font-weight: 400;} 设置为普通文本，将 {font-weight: 700;} 设置为粗体。

【讨论】：