css - 为什么 Firefox 从我的字体选项中选择了错误的字体粗细？

Question

我一直在使用 Source Sans Pro和 Source Code Pro在我的 sites , 它在 Safari 和 Chrome 中看起来很棒。然而，在 Firefox 中，似乎使用了错误的字体粗细，因为 Firefox 中的粗细要轻得多(也更难阅读)。我的@font-face declarations看起来像这样:

@font-face {
    font-family: 'Source Sans Pro';
    src: url('/fonts/sourcesanspro-regular-webfont.eot');
    src: url('/fonts/sourcesanspro-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/sourcesanspro-regular-webfont.woff') format('woff'),
         url('/fonts/sourcesanspro-regular-webfont.ttf') format('truetype'),
         url('/fonts/sourcesanspro-regular-webfont.svg#source_sans_proregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: url('/fonts/sourcesanspro-light-webfont.eot');
    src: url('/fonts/sourcesanspro-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/sourcesanspro-light-webfont.woff') format('woff'),
         url('/fonts/sourcesanspro-light-webfont.ttf') format('truetype'),
         url('/fonts/sourcesanspro-light-webfont.svg#source_sans_prolight') format('svg');
    font-weight: lighter; // light
    font-style: normal;

}

参见 the file完整的声明。在显示 normal 大小时，我的声明是否导致 Firefox 选择了错误的文件？

Answer 1

正如 this answer 中指出的那样，它看起来好像 Firefox 使用最后声明的 @font-face 给定样式来显示内容。我为 normal 样式定义的最后一个面具有 light 的权重，所以这是 Firefox 使用的。解决方案是使用 numeric weights在 @font-face 声明中，正如我现在所做的那样 here .然后它会在适当的地方正确使用正常权重。