2

我一直在我的网站上使用Source Sans Pro和Source Code Pro，它在 Safari 和 Chrome 中看起来很棒。然而，在 Firefox 中，似乎使用了错误的字体粗细，因为 Firefox 中的粗细要轻得多（也更难阅读）。我的声明如下所示：@font-face

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

}

有关完整声明，请参阅文件。我的声明是否有某些内容导致 Firefox 在显示normal大小时选择了错误的文件？

4

2 回答 2

1

正如在这个答案中指出的那样，Firefox 似乎使用@font-face给定样式的最后声明来显示内容。我为normal样式定义的最后一个面的权重为light，因此是 Firefox 使用的那个。解决方案是在声明中使用数字权重@font-face，就像我现在在这里所做的那样。然后它在适当的地方正确使用正常重量。

于 2013-11-04T18:56:38.070 回答
0

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

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

于 2013-11-02T11:20:11.787 回答