CSS - Firefox 和 Chrome 中的字体渲染方式不同

Question

我正在使用 Google Fonts 和 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]

铬版本：62.0.3202.94 (64 bit) [Most recent]

非常感谢。

Answer 1

我已经测试了一些东西，并且找到了一些方法来确保 Firefox 不会显示不一致的字体粗细。

我可以使用一些 jQuery 来检测浏览器，然后我可以添加特定于浏览器的样式。在本例中，我向标题块添加了字体粗细，使其字体粗细更轻，从而创建更清晰的外观：

左边是带有 的 Firefox font-weight: 400，右边是带有 的 Chrome font-weight: 600。请参阅下面的我的浏览器检测 jQuery。

if (navigator.userAgent.search("Firefox") >= 0) {
    $('body').addClass('firefox');
}

我的CSS如下：

body.firefox h1 {
     font-weight: 400;
}

这不一定是解决办法，但它消除了字体权重的不稳定。

请随意评论任何更好的方法，或者对这个问题有更实际的解决方案。

非常感谢。