Firefox和IE上的字体与Chrome上的字体不同

Question

我使用的是我通过@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，那么它就会像它应该的那样工作。

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

Answer 1

所有应用程序都是使用特定的代码块开发的。这就像＆＃34;默认字体＆＃34;在HTML和CSS上。它发生在所有在不同浏览器上打开的网页上。试试这件事吧 Facebook 你会看到Chrome和Firefox上的字体之间的区别。如果字体看起来比你想要的更大胆，那么只需使用＆＃34; font-weight＆＃34;在CSS StyleSheet上。例如： -

  

body.font-weight：xx px;

Answer 2

迟到的回复但是这里有; Firefox会在您的情况下将标题和其他一些元素呈现为“双粗体”，因此如果您不想加载更多字体文件，则必须从元素中删除字体粗细以便对其进行规范化。

要改善渲染效果，请尝试按以下方式加载字体[2] [3]：

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/roboto-regular-webfont.woff2') format('woff2'),
         url('../fonts/roboto-regular-webfont.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Roboto';
    src: url('../fonts/roboto-bold-webfont.woff2') format('woff2'),
         url('../fonts/roboto-bold-webfont.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Roboto';
    src: url('../fonts/roboto-italic-webfont.woff2') format('woff2'),
         url('../fonts/roboto-italic-webfont.woff') format('woff');
    font-weight: 400;
    font-style: italic;
}

[1]最好使用较少的字体但包含正确的字体

[2]仅以Roboto为例，但同样适用于其余部分

[3]考虑用绝对数字而不是相对值来定义值，因为不同浏览器可以对它们进行不同的解释

Answer 3

我的问题的答案是具有不同的字体粗细，例如如果您使用的是Google字体，请确保已导入浅（300），常规（400），中型（500），粗体（700）版本。