Firefox中的字体平滑处理

Question

使用Google WebFonts（在本例中为“Oswald”），我发现我的字体比它们应该的更加粗体。我已经通过以下方式解决了基于Webkit的浏览器中的问题：

-webkit-font-smoothing: antialiased;

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

以下是需要翻译的内容：

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

以下是在 WebKit（Chrome）中看起来的样子：

这是由于Firefox的渲染问题导致的糟糕块状呈现：

我知道在FireFox中有一种方法可以实现这个，因为我在font-combinator.com上找到了这个字体，并且在使用Firefox时在font-combinator上呈现得很好。以下是在Firefox通过font-combinator.com看起来的样子：

在浏览用于创建字体组合器的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。

- Nick

---

看起来不像是渲染问题，你是否声明了字体的粗细？ - David Nguyen

body { font-weight:normal; } 感谢您的任何建议。 - Nick

你能粘贴一下字体声明吗？ - David Nguyen

感谢您的想法@Boris Zbarsky。与Firefox v Chrome比较时，页面上的其他字体问题是相同的。无论如何，我正在寻找解决方法，因为似乎Firefox不支持像“-webkit-font-smoothing：antialiased;”这样的属性。请参见：https://dev59.com/3Wgu5IYBdhLWcg3wQE4D。在任何情况下，您介意删除您的评论以使我的域名不出现在留言板上吗？我非常感激！谢谢您的建议！ - Nick

在我的Mac上，Firefox和Chrome的字体看起来完全相同。如果你是在Windows上，你只是看到了Direct2D和GDI所做的字体渲染方面的差异吗？无论如何，正如我所说，“抗锯齿”行为是Firefox的默认行为...所以，无论你看到什么，都与字体平滑行为无关。 - Boris Zbarsky

有点奇怪，我用的是 Mac，看到它们之间有差异，但在 Google 网络字体网站上它们看起来是一样的。 - David Nguyen

Answer 1

这只是一个在OSX上使用Firefox时的问题...

我刚刚回答了这个问题：如何在Firefox中抗锯齿SVG文本，并给出了一个可能解决你问题的方案。

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

-moz-osx-font-smoothing: grayscale;

这将与火狐浏览器25一起发布（夜间版本可在http://nightly.mozilla.org/找到）

- Tieme

---

我不太同意。我在Windows 7上只有在Firefox中出现了这个问题（Chrome和IE默认情况下都很流畅，我什么也没做）。我使用的字体是Bitter，Georgia，衬线字体。 - goamn

Answer 2

你是否尝试过声明数字字重，而不仅仅是“normal”或“bold”？在不同的浏览器中呈现Web字体时有很多差异。

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

- BraMKJ