我正在使用通过@font-face加载的三种字体,它们看上去都应该像在Chrome上那样,但是在Firefox和IE上它们看起来却有所不同。就像给它们添加了额外的粗体一样,它们更加块状。

@font-face {
    font-family: 'OpenSans-Regular';
    src: url('../fonts/OpenSans-Regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Montserrat-Regular';
    src: url('../fonts/montserrat-regular-webfont.woff2') format('woff2'),
         url('../fonts/montserrat-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Roboto-Regular';
    src: url('../fonts/roboto-regular-webfont.woff2') format('woff2'),
         url('../fonts/roboto-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


我如何将这些字体应用于元素:

...
font-family: "OpenSans-Regular", sans-serif;
...


css - Firefox和IE上的字体看起来与Chrome上的字体不同-LMLPHP

如果我使用开发人员工具在Firefox中编辑元素并设置font-family: Open Sans,则它会像应该的那样工作。

这个问题让我头疼,因为我不明白为什么会这样。

最佳答案

所有应用程序都是使用特定的代码块开发的。就像HTML和CSS上的“默认字体”一样。在使用不同浏览器打开的所有网页上都会发生这种情况。试试这个东西
Facebook
并且您将看到Chrome和Firefox上的字体之间的区别。如果字体看起来比您想要的粗体,则只需在CSS StyleSheet上使用“ font-weight”即可。例如。:


  body.font-weight:xx px;

关于css - Firefox和IE上的字体看起来与Chrome上的字体不同,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/44077863/

10-12 12:30
查看更多