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。我的声明是否会导致Firefox在显示normal尺寸时选择错误的文件？

Answer 1

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

Answer 2

Chrome和Safari使用webkit作为其渲染引擎。（Chrome现在已转移到使用webkit子集的Blink）。另一方面，Firefox使用gecko。所以，是的，这就是我们需要使用不同浏览器测试网页的原因。

关于你的问题，我想这会有所帮助：http://css-tricks.com/forums/topic/font-rendering-ugly-in-firefox-but-beautiful-in-webkit/

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

2 个答案: