11

使用 Google WebFonts(在本例中为“Oswald”),我发现我的字体被渲染得比应有的更粗。我已经在基于 webkit 的浏览器中使用以下方法解决了这个问题:

-webkit-font-smoothing: antialiased;

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

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

铬看起来不错

由于 Firefox,这是块状可怕的渲染:

火狐丑

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

在 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。

4

2 回答 2

36

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

我刚刚回答了这个问题:How to antialias SVG text in Firefox with a possible solution form your question。

我认为您可以使用以下属性:

-moz-osx-font-smoothing: grayscale;

这将与 firefox 25 一起发布(可以在http://nightly.mozilla.org/找到每晚构建的版本)

于 2013-08-19T09:56:36.973 回答
1

您是否尝试过声明数字字体粗细而不仅仅是“正常”或“粗体”?在不同的浏览器中呈现网络字体有很多差异。

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

于 2013-06-07T13:21:51.027 回答