@ font-face：FF中的粗体比Chrome中的粗体 [英] @font-face: bold in FF is bolder than in Chrome

问题描述

我使用了以下代码：

@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时：粗体； ，那么Chrome中的粗体字就可以了，但是Firefox中的粗体字就太多了。

and when I using font-weight: bold; then bold text in Chrome is ok, but in Firefox is too much bolder.

如何解决这个问题？

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

PS: I have to use the fonts from local files.

推荐答案

这里的问题是FF接受字体并对其应用粗体字体粗细（因此基本上使效果加倍）。 Chrome似乎并没有改变字体粗细，只是使用了正确的字体。我认为发生这种情况是因为您声明了两个不同的字体系列。对于这种情况，正确的CSS应该是：

The Problem here is that FF takes the font and applies the bold font-weight to it (So basically it doubles the effect). Chrome doesn't seem to change the font-weight and just uses the right font. I think this happens because you declare two different font-families. The right CSS for this case would be:

@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。

Notice that I changed the font-family to "DroidSans" not "DroidSansRegular" and "DroidSansBold".

这篇关于@ font-face：FF中的粗体比Chrome中的粗体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！