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今天在他们的bug论坛上发布了一个解决方案。它刚刚在今天完成，所以暂时不会使用，但我们都应该放

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

请注意，我将font-family更改为“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;
}

你还需要在任何元素（例如h1，h2等）上使用font-weight:normal;否则会设置font-weight:bold;，否则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中的粗体字体进行任何 ...你真的没有选择在用户的机器上关闭它。硬件加速非常重要。我想你只需要忍受它。在过去的3到4年里，他们没有解决这个问题。 Probaby他们将来不会解决这个问题。

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

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

<强>更新

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

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

Answer 7

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

这对我有用！

Answer 8

通常基于JavaScript的字体渲染效果更好，但由于渲染引擎的原因，不同浏览器中的所有内容都会有所不同。你甚至会注意到Windows和Windows之间的区别。 Mac使用相同的浏览器。

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

Answer 9

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

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

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

9 个答案: