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

Question

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

@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

所有应用程序都是用特定的代码块开发的。这就像 HTML 和 CSS 上的“默认字体”。它发生在所有在不同浏览器上打开的网页上。试试这个东西 Facebook 你会看到 Chrome 和 Firefox 上字体的区别。如果字体看起来比你想要的更粗，只需在 CSS StyleSheet 上使用“font-weight”。例如:

body.font-weight: xx px;