Internet Explorer 8 忽略 CSS 中的字体粗细

所以我无法理解为什么 IE 在这里忽略我的 CSS。我有这个代码：

<h2>Har du stadsnät eller kan du få det?</h2>

IE。没什么奇怪的或什么的。 这是最终的渲染结果：

但这里是该 HTML 的 CSS 代码：

.rubrik, h2 {
  font-family: Lato;
  font-size: 32px;
  font-weight: normal;
  line-height: 38px;
  font-variant: normal;
  font-style: normal;
  color: #969696; 
}

其中明确指出 H2 应该具有“正常”字体粗细，但渲染的文本明显是粗体，这是正确的渲染（来自 Safari）

因此，使用 Internet Explorer 8 附带的开发人员工具，我检查了 CSS 解释，如下所示：

据我了解，我在这里看到的是 IE8 对我的 CSS 的解释，并且可疑地缺少“正常”属性。 IE 已将 CSS 转换为单行版本的“字体”，但不包含“正常”部分。现在，字体“Lato”是一个font-face字体，font-face CSS在这里：

@font-face {
    font-family: Lato;
    src: url('/media/fonts/Lato.eot');
    src: local('nofont'), url('/media/fonts/Lato.ttf') format('truetype');
}
@font-face {
    font-family: Lato;
    src: url('/media/fonts/Lato-Bold.eot');
    src: local('nofont'), url('/media/fonts/Lato-Bold.ttf') format('truetype');
    font-weight: bold;
}
@font-face {
    font-family: Lato;
    src: url('/media/fonts/Lato-Bold-Italic.eot');
    src: local('nofont'), url('/media/fonts/Lato-Bold-Italic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}
@font-face {
    font-family: Lato;
    src: url('/media/fonts/Lato-Italic.eot');
    src: local('nofont'), url('/media/fonts/Lato-Italic.ttf') format('truetype');
    font-style: italic;
}

即使在 font-face 声明中为 font-weight 指定“正常”，它也不起作用。所以我被困在这里，试图弄清楚我做错了什么，没有让 IE 在 H2 的声明中包含“font-weight：normal”......有什么猜测吗？提前致谢...

我认为你需要更改名称font-family: Lato;在每个 fontface 属性上，因为 IE 可能会感到困惑。相反尝试把font-family: Lato-bold;, font-family: Lato-italic另外，如果字体有粗体（就像 Lato 那样并且您在字体属性中引用了），那么您不需要添加font-weight: bold;对于 fontface 属性，因为字体已经是粗体了，添加 font-weight 只会添加假粗体并使其看起来很糟糕。

这意味着对于您的h2，你只需要把font-family: Lato;如果你希望它是正常的、非粗体的版本。