CSS - 字体在 Firefox 和 Chrome 中呈现不同

Question

我正在使用 Google 字体和 CSS @import将字体包含在我的网站上的方法。

Chrome 漂亮地显示字体；它们具有均匀的重量并且清晰可见。 Firefox 不会复制此渲染。见下文:



在左侧，您可以看到 Firefox。标题字体粗细不一致。您可以看到较小的描述性文字比 Chrome 对应的文字有一些额外的重量。

Chrome 位于右侧，正如您所看到的，字体的权重很高。

我正在使用以下 CSS 来尝试解决此问题:

@import url('https://fonts.googleapis.com/css?family=Muli|Source+Code+Pro');

* {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

如何解决此问题并让 Firefox 以适当的权重显示我的字体？

火狐版本: 57.0.1 (64 bit) [Most recent]
Chrome 版: 62.0.3202.94 (64 bit) [Most recent]
非常感谢。

Answer 1

你走的是一条阴暗的道路。现在，最好的办法是保持原样，让浏览器和操作系统制造商修复他们的文本渲染实现。

相信我，我已经使用了所有这些设置，但没有一个会产生像样/一致的渲染，尤其是当您开始跨 Windows、OS X 和 Linux 进行测试时。

覆盖 text-rendering和 font-smoothing最终会减慢整个应用程序的速度(尤其是在 DOM 树很大的情况下)。

如果最终用户不关心文本呈现(也许他没有在 Windows XP 上设置 ClearType？)，不管怎样它都会看起来很糟糕。

要点是:不要试图在所有元素上强制进行文本渲染。在字体渲染看起来非常糟糕的标题上，尝试使用 geometricPrecision因为这将尝试在渲染时保持字体字形的原始形状精度。