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以适当的权重显示我的字体？

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，因为这将尝试在渲染时保持字体字形的原始形状精度。

Answer 2

正如其他人写的那样，不要试图在浏览器（或操作系统）中“修复”文本呈现

文本渲染是一个非常复杂的过程，有很多启发式和特殊情况，浏览器和操作系统总是调整它们的渲染以试图实现更好的妥协，它们不是也不会彼此一致或从版本到版本，根据您使用的字体（和字体版本），您可能会遇到渲染最佳点或恐怖案例。

加上 对结果的评估将始终受到您习惯的渲染的严重影响，并且您的用户通常会有不同的习惯和偏好。

你唯一可以修复的渲染就是系统中的一个你的品味，最好的方法就是买一个HiDPI屏幕，因为大多数文本渲染近似，糟糕的舍入和启发式黑魔法到期尝试在不够的像素中拟合复杂和小的字形形状。

Answer 3

我一直在测试一些东西，我找到了一些方法来确保Firefox没有显示不一致的字体重量。

我可以使用一些jQuery来检测浏览器，从那里我可以添加特定于浏览器的样式。在这种情况下，我在标题栏中添加了一个字体权重，以便它具有更轻的字体权重，从而创建更清晰的外观：

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

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

我的CSS如下：

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

它不一定是修复，但它消除了字体加权的不连贯性。

请随时评论有关更好的方法，或者更实际的解决方案。

非常感谢。

Answer 4

对于这种特定字体（源代码专业版），我遇到了同样的问题-Chrome / Firefox的呈现方式非常不同。原来，我们只导入了400粗细字体，但是在CSS中将其设置为 output = subprocess.Popen([ "docker", "logs", "$(docker", "ps", "-a", "-f", "status=exited", "|", "grep", "-w", "'dev'", "|", "awk", "'{print $1}'" ]) 。

我们的旧字体定义：

font-weight: bold

即使不存在粗体版本，Chrome仍尝试将字体呈现为粗体（并且做得很好），而Firefox甚至根本没有尝试将其呈现为粗体。这就是为什么他们看起来如此不同。

我们也通过导入字体的粗体变形解决了该问题，现在Firefox使其与Chrome非常相似。

我们的新字体定义：

@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 400;
  src: local('Source Code Pro'), local('SourceCodePro-Regular'), url(<FONT URL>) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}