我正在使用通过@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;
...
如果我使用开发人员工具在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/