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转换为“font”的单行版本，但未包含“普通”部分。现在，字体“Lato”是字体 - 面部字体，字体 - 面部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-weight的font-face声明中指定“normal”，它也不起作用。所以我被困在这里，试图弄明白我做错了不要让IE在声明中包含“font-weight：normal”......任何猜测？提前谢谢......

Answer 1

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

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

Answer 2

这可能是继承问题。您是否尝试过使用！important关键字。

font-weight: normal !important;