@font-face：FF 中的粗体比 Chrome 中的粗体答案

【问题标题】：@font-face: bold in FF is bolder than in Chrome@font-face：FF 中的粗体比 Chrome 中的粗体
【发布时间】：2018-07-03 06:41:49
【问题描述】：

我使用了这个代码：

@font-face {
    font-family: 'DroidSansRegular';
    src: url('droidsans-webfont.eot');
    src: url('droidsans-webfont.eot?#iefix') format('embedded-opentype'),
         url('droidsans-webfont.woff') format('woff'),
         url('droidsans-webfont.ttf') format('truetype'),
         url('droidsans-webfont.svg#DroidSansRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'DroidSansBold';
    src: url('droidsans-bold-webfont.eot');
    src: url('droidsans-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('droidsans-bold-webfont.woff') format('woff'),
         url('droidsans-bold-webfont.ttf') format('truetype'),
         url('droidsans-bold-webfont.svg#DroidSansBold') format('svg');
    font-weight: bold;
    font-style: normal;
}

当我使用font-weight: bold; 时，Chrome 中的粗体文本是可以的，但在 Firefox 中粗体太多了。

如何解决？

PS：我必须使用本地文件中的字体。

【问题讨论】：

afaik，每个主要浏览器都使用不同的渲染引擎，它们会以不同的方式显示文本......甚至每个字形的特定形状可能会有所不同，具体取决于 TrueType/OpenType 提示的多少算法实现了。

标签： css cross-browser font-face

【解决方案1】：

FireFox 今天在他们的错误论坛上发布了一个解决方案。今天刚定稿，暂时不用，大家都应该放

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

在我们的body 标签中为所有浏览器重置此设置。最后！！伙计，这让我很开心！这应该会在下一个 FF 版本中出现。

在这里发帖 https://bugzilla.mozilla.org/show_bug.cgi?id=857142

【讨论】：

这让我很开心。我很久以前就失去了希望，现在才发现。

【解决方案2】：

这里的问题是 FF 采用字体并将粗体字重应用于它（所以基本上它使效果加倍）。 Chrome 似乎没有改变字体粗细，只是使用了正确的字体。我认为这是因为您声明了两个不同的字体系列。这种情况下正确的 CSS 是：

@font-face {
    font-family: 'DroidSans';
    src: url('droidsans-webfont.eot');
    src: url('droidsans-webfont.eot?#iefix') format('embedded-opentype'),
         url('droidsans-webfont.woff') format('woff'),
         url('droidsans-webfont.ttf') format('truetype'),
         url('droidsans-webfont.svg#DroidSansRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'DroidSans';
    src: url('droidsans-bold-webfont.eot');
    src: url('droidsans-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('droidsans-bold-webfont.woff') format('woff'),
         url('droidsans-bold-webfont.ttf') format('truetype'),
         url('droidsans-bold-webfont.svg#DroidSansBold') format('svg');
    font-weight: bold;
    font-style: normal;
}

请注意，我将字体系列更改为“DroidSans”而不是“DroidSansRegular”和“DroidSansBold”。

【讨论】：

大吃一惊。我不知道我被允许更改字体系列名称。我总是只是复制并粘贴字体提供商给我的确切代码。（截至 2014 年 9 月仍然有效）
如果我使用谷歌字体怎么办？有什么解决办法吗？
应该开箱即用，Google 通过定义一个系列并添加相应的字体粗细以“正确”的方式添加字体。这是他们的样式表之一：fonts.googleapis.com/css?family=Open+Sans:400,700,300 正如您所看到的定义权重的 300/400/700，您可能必须使用数字而不是“粗体”或“轻”，例如：font-weight: 300;希望对您有所帮助。

【解决方案3】：

问题在于 Firefox 会尝试将粗体效果添加到文本中，即使对于已经是粗体的自定义字体也是如此。我刚刚遇到了完全相同的情况，并通过在 @font-face 声明上设置 font-weight: normal; 来解决它。

例子：

@font-face {
    font-family: 'DroidSansBold';
    src: url('droidsans-bold-webfont.eot');
    src: url('droidsans-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('droidsans-bold-webfont.woff') format('woff'),
         url('droidsans-bold-webfont.ttf') format('truetype'),
         url('droidsans-bold-webfont.svg#DroidSansBold') format('svg');
    font-weight: normal;
    font-style: normal;
}

您还需要在任何会设置 font-weight:bold; 的元素（例如 h1、h2 等）上使用 font-weight:normal;，否则 Firefox 仍会为自定义字体添加粗体。

【讨论】：

【解决方案4】：

您已在两个不同的族中指定了两个面。您已经在名为“DroidSansRegular”的系列中定义了一个普通脸，并且在名为“DroidSansBold”的系列中定义了一个粗体脸。 CSS 的设计希望您将它们定义为一个系列的两个权重。如果你都说font-family: "DroidSans";，那么你可以使用一个名为“DroidSans”的字体系列，当你要求加粗时，你会得到那个系列的粗体。

（糟糕。选择的答案已经给出了正确的解决方案，但没有完全解释问题所在。）

【讨论】：

【解决方案5】：

我的问题是“更粗体”的文本位于 h1 标记内。我刚刚在我的 CSS 中添加了以下内容，它解决了问题！ :)

h1,h2,h3,h4,h5,h6{
    font-weight:normal;
}

【讨论】：

【解决方案6】：

我使用了 Alex 的解决方案：

@font-face {
    font-family: 'SomeFont';
    src: url('fonts/somefont-webfont.eot');
    src: url('fonts/somefont-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/somefont-webfont.woff') format('woff'),
         url('fonts/somefont-webfont.ttf') format('truetype'),
         url('fonts/somefont-webfont.svg#SomeFontRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'SomeFont';
    src: url('fonts/somefontbold-webfont.eot');
    src: url('fonts/somefontbold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/somefontbold-webfont.woff') format('woff'),
         url('fonts/somefontbold-webfont.ttf') format('truetype'),
         url('fonts/somefontbold-webfont.svg#SomeFontBold') format('svg');
    font-weight: bold;
    font-style: normal;
}

在 Firefox v24 中仍然无法使用...今天，2013 年 10 月 28 日。粗体 @font-face 问题仍然存在。

经过一番搜索，我在这里找到了这个解决方案： https://support.mozilla.org/hu/questions/801491

至少在 Mozilla 通过更新 (2011.03.27...) 纠正此问题之前，起作用的是关闭硬件加速。转到工具->选项|高级 |常规选项卡 |取消选中“在可用时使用硬件加速”。我确信这会在某种程度上影响性能，但到目前为止效果还不错。

很遗憾，您真的无法对 Firefox 中的粗体字体做任何事情...您真的无法在用户的机器上关闭它。硬件加速真的很重要。我想你只需要忍受它。他们在过去 3-4 年没有解决这个问题。可能他们将来不会解决这个问题。

但是，我注意到这个问题可能不会影响外部 javascript 字体（例如：Typekit、EdgeFonts）。

希望 Chrome 能在越来越多用户的 PC 上找到自己的方式......

更新：

只能关闭部分硬件加速。教程在这里：http://www.mydigitallife.info/fix-firefox-4-fade-blur-bold-bad-and-ugly-font-rendering/

还提到了另一个解决方案：在显卡的设置页面中关闭 Firefox 的各向异性过滤（但这对我不起作用）。

【讨论】：

【解决方案7】：

@-moz-document url-prefix() {
  body h3{
    font-weight: normal;
    font-style: normal;
  }
}

这对我有用！

【讨论】：

【解决方案8】：

通常基于 JavaScript 的字体渲染效果更好，尽管由于渲染引擎的原因，在不同的浏览器中一切看起来都会有所不同。您甚至会注意到使用相同浏览器的 Windows 和 Mac 之间的差异。

Typekit 往往是我最喜欢的选择。谷歌字体也做得很好。我认为 DroidSans 是 Google 或 Typekit 的一个选项。

【讨论】：

【解决方案9】：

简而言之，由于每个浏览器使用的渲染引擎和内部设置略有不同，因此确实没有办法解决这个问题。（正如@LainBallard 所暗示的那样）。

如果您真的需要像素完美，您唯一真正的希望是使用图像，但我会尝试调整您的设计，以便您不需要像素完全匹配。

【讨论】：