9

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

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

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

渲染 HTML

但这里是这个 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 解释,看起来像这样:

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”......有什么猜测吗?提前致谢...

4

2 回答 2

4

我认为您需要更改font-family: Lato;每个 fontface 属性的名称,因为 IE 可能会感到困惑。而是尝试 putfont-family: Lato-bold;font-family: Lato-italic。此外,如果字体具有粗体(如 Lato 那样,并且您已在 fontface 属性中引用),那么您不需要添加font-weight: bold;fontface 属性,因为字体已经是粗体并添加字体-weight 只会添加人造粗体并使其看起来很糟糕。

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

于 2013-02-15T09:52:56.837 回答
-3

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

font-weight: normal !important;
于 2013-02-15T09:25:40.207 回答