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

Question

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

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

即没有什么奇怪的或任何东西。 这是生成的渲染：

但这里是这个 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;
}

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

Answer 1

这可能是继承问题。您是否尝试过输入 !important 关键字。

font-weight: normal !important;

Answer 2

我认为您需要更改每个 fontface 属性上的 font-family: Lato; 的名称，因为 IE 可能会混淆。而是尝试输入font-family: Lato-bold;、font-family: Lato-italic 等。此外，如果字体具有粗体（如 Lato 那样，并且您已在 fontface 属性中引用），那么您不需要为 fontface 属性添加 font-weight: bold;，如字体已经是粗体，添加 font-weight 只会添加 faux-bold 并使其看起来很糟糕。

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