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

Question

我使用了这段代码：

@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：我必须使用本地文件中的字体。

Answer 1

FireFox 今天在其错误论坛上发布了解决方案。它今天才最终确定，因此暂时不会使用，但我们都应该放入

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

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

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

Answer 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”。

Answer 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 仍会为自定义字体添加粗体。

Answer 4

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

（哎呀。所选答案已经给出了正确的解决方案，但没有完全解释出什么问题。）

Answer 5

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

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

Answer 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 中的粗体字体做任何操作...您确实无法选择在用户的计算机上关闭此功能。硬件加速确实很重要。我想你只需要忍受它。他们在过去的三四年里没有解决这个问题。他们将来可能不会解决这个问题。

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

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

更新：

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

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

Answer 7

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

这对我有用！

Answer 8

在研究了这个问题之后，我找到了一个有效的解决方案。我应用了一些 CSS 属性，他们解决了这个问题。这就是我所做的：

首先，我将正文的字体设置为“Libre Baskerville”并带有衬线后备，您可以根据需要设置字体。然后，我添加了字体平滑的属性。通过减少锯齿状边缘，可以使文本在屏幕上看起来更好。这是 CSS 代码：

body {
    font-family: 'Libre Baskerville', serif;
    -moz-osx-font-smoothing: grayscale;
}

我还需要确保 Firefox 中的字体粗细正常。为此，我使用了仅影响 Firefox 的特殊 CSS 规则。这是代码的一部分：

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

Answer 9

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

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

Answer 10

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

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