@fontface FireFox(10)渲染文本非常粗体

Question

我用@ font-face在css中实现了一个字体,在Safari中加载时看起来更胖.有谁知道是什么原因引起的？

@font-face {
    font-family: 'SerifaBold';
    src: url('/css/serifbol-webfont.eot');
    src: url('/css/serifbol-webfont.eot?#iefix') format('embedded-opentype'),
         url('/css/serifbol-webfont.woff') format('woff'),
         url('/css/serifbol-webfont.ttf') format('truetype'),
         url('/css/serifbol-webfont.svg#SerifaBold') format('svg');
    font-weight: 100;
    font-style: normal;

}

Answer 1

你的font-face规则告诉浏览器这是一个超轻字体(font-weight: 100部分).然后,您可能会要求浏览器将此字体用于具有正常权重(font-weight: 400)或粗体(font-weight: 700)的文本.浏览器看到它有一个超轻的字体(因为你告诉它)并且需要一个普通的字体,它做了所谓的"合成粗体":通过略微偏移几次绘制它们,人为地使字母更大胆.

合成粗体没有标准,浏览器的默认行为也不同.

如果您尝试将此字体用于粗体文本,并且它已经是一个粗体,您应该在使用font-weight描述符的font-face规则中这样说.