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

Posted 2023-03-06

【中文标题】Internet Explorer 8 忽略 CSS 中的字体粗细

【英文标题】：Internet Explorer 8 ignores font-weight in CSS

【发布时间】：2013-01-31 05:36:39

【问题描述】：

所以我很难理解为什么 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”......有什么猜测吗？提前谢谢...

【问题讨论】：

尝试将字体名称放在引号中！哦，你用同一个名字多次定义字体系列，不确定 IE 是否喜欢这么多。

尝试使用font-weight: 100;

@reinder 引用字体名称没有区别，IE 确实选择了正确的字体，而不仅仅是正确的重量。

@Mr.Alien 是的，这确实在 CSS 解释中包含了“100”，但在实际渲染中似乎没有任何改变，可能是因为没有相应的字体-weight：字体声明中的 100。我会用这个测试一些东西......

这更像是一种 hack，但你可以尝试定义你的字体名称，如 Lato-normal、Lato-bold 等，并在你想要粗体的地方使用它们......

【参考方案1】：

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

font-weight: normal !important;

【讨论】：

我确实有，这也不包括在解释中，也没有改变渲染，很遗憾。

显式声明不能被继承覆盖；这是 CSS 继承概念的一部分。

【参考方案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;。

【讨论】：

但是这肯定违反了字体规范。如果是这样，您将如何获得粗体内联？那么如果没有指定 Lato 的粗体状态，我将不得不专门将 B 和 STRONG 设置为 font-family: Lato-Bold？

是的，设置 b 和 strong 以拥有 Lato-bold 的字体系列。如果你只是用 font-weight: bold;然后你会得到双粗体（字体独特设计的粗体，和浏览器的仿粗体），看起来不太好。我通常也将 h1、h2、h3 等设置为 font-family: Lato-bold;使用字体时也是如此。这对于支持/兼容性来说应该不是太大的问题，因为 IE6 和大多数其他浏览器版本都支持 @font-face：caniuse.com/#feat=fontface