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

我正在使用谷歌字体和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位）[最新版本]

Chrome版本：

62.0.3202.94（64位）[最新版本]

---

非常感谢。

你正走在一条凄凉的道路上。现在，最好的办法是保持现状，让浏览器和操作系统制造商修复它们的文本呈现实现

相信我，我已经使用了所有这些设置，但没有一个能够产生良好/一致的渲染效果，特别是当您开始在Windows、OS X和Linux上进行测试时

覆盖

文本呈现

和

字体平滑

最终会降低整个应用程序的速度（尤其是在DOM树较大的实例上）

如果最终用户不关心文本呈现（可能他没有在Windows XP上设置ClearType？），那么无论发生什么情况，它都会看起来很糟糕

---

---

要点是：不要试图在所有元素上强制进行文本呈现。在字体渲染效果非常差的标题上，尝试使用

geometricPrecision

，因为这样可以在渲染时保持字体轮廓的原始形状精度。

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

我可以使用一些jQuery来检测浏览器，并从中添加特定于浏览器的样式。在本例中，我在标题栏中添加了字体权重，使其具有更轻的字体权重，从而创建了更清晰的外观：

左边是字体重量为400的Firefox，右边是字体重量为600的Chrome。有关我的浏览器jQuery，请参见下文

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

我的CSS如下：

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

这不一定是一个修复，但是它消除了字体权重的波动性

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

---

非常感谢。

正如其他人所写，不要费心尝试在浏览器（或操作系统）中“修复”文本呈现

文本呈现是一个非常复杂的过程，有很多启发法和特殊情况，浏览器和操作系统总是调整它们的呈现以尝试实现更好的折衷，它们彼此之间或版本之间不一致，并且取决于字体（和字体版本）你可以使用你可能会碰到的渲染甜蜜点或恐怖案例

另外，您对结果的评估总是会受到您习惯的渲染的严重影响，并且您的用户通常会有不同的习惯和偏好

您可以修复的唯一渲染是系统上适合您口味的渲染，最好的方法就是购买一个HiDPI屏幕，因为大多数文本渲染近似值、糟糕的舍入和启发式黑魔法都是由于试图在不足的像素中适配复杂和小的字形形状。

对于这种特定字体（Source Code Pro），我也遇到了同样的问题——Chrome/Firefox的呈现方式非常不同。事实证明，我们只导入了400重量版本的字体，但我们在css中将其设置为

font-weight:bold

我们的旧字体定义：

@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;
}

@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;
}
@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 700;
  src: local('Source Code Pro Bold'), local('SourceCodePro-Bold'), 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;
}

@font-face{
字体系列：“源代码Pro”；
字体风格：普通；
字体大小：400；
src:local（'SourceCodePro'）、local（'SourceCodePro-Regular'）、url（）格式（'woff2'）；
unicode范围：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；
}

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;
}

@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;
}
@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 700;
  src: local('Source Code Pro Bold'), local('SourceCodePro-Bold'), 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;
}

@font-face{
字体系列：“源代码Pro”；
字体风格：普通；
字体大小：400；
src:local（'SourceCodePro'）、local（'SourceCodePro-Regular'）、url（）格式（'woff2'）；
unicode范围：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；
}
@字体{
字体系列：“源代码Pro”；
字体风格：普通；
字号：700；
src:local（'SourceCodePro-Bold'）、local（'SourceCodePro-Bold'）、url（）格式（'woff2'）；
unicode范围：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；
}

您是否也可以包括@import CSS和相关HTML，以便我们可以看到一个更具体的示例进行测试？也许可以尝试

几何精度

而不是

优化易读性

，看看这是否有帮助？除此之外，正如abney317所说，如果不能复制问题，很难提供很多建议。@abney317-嗨，这里是

@import

-

@import url（'https://fonts.googleapis.com/css?family=Muli|源代码+代码+Pro'）。我还更改了我的问题，将其包括在内。@delinear-我尝试了
几何精度
而不是
优化易读性
，并且