@ 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今天在他们的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".