CSS 字体样式更改在 Chrome 中不起作用

Question

有人可以澄清为什么下面的字体样式设置在 chrome 中不起作用，但在 IE 和 FireFox 中起作用。

我的网站有同样的问题，它没有选择 CSS 字体设置（normal提到的地方），因此我使用W3Schools 的 CSS 测试环境进行了测试，行为是相同的。

CSS 片段：

• 仅适用于 IE/FireFox： font-family: Arial, Helvetica, sans-serif normal;
• 在所有浏览器中工作： font-family: Arial, Helvetica, sans-serif;

尝试在 Chrome 和 IE 中查看差异。

body {
  font-family: "Times New Roman", serif;
}
p.serif {
  font-family: Arial, Helvetica, sans-serif;
}
p.sansserif {
  font-family: Arial, Helvetica, sans-serif normal;
}

<h1>CSS font-family</h1>
<p class="serif">This is a paragraph, shown in Arial Without Normal.</p>
<p class="sansserif">This is a paragraph, shown in Arial With Normal</p>

以下是问题：

• 您能否澄清为什么这两种浏览器之间的行为差​​异？
• 如何确保 Chrome 和 IE/FireFox 选择我的 CSS 字体样式（我应该normal从所有 CSS 文件中删除还是有更好的方法来做到这一点）？

Answer 1

可以说是无效的 font-family声明

如果您打开浏览器的检查器（Chrome 中的Ctrl+ Shift+ i），您将看到 CSS 规则

p.sansserif {
    font-family: Arial, Helvetica, sans-serif normal;
}

不适用。

根据CSS 规范，无效规则将被忽略，并且会应用任何本应应用的（向后级联），或者更准确地应用，而不是被否决。
结果是"Times New Roman"在这种情况下 - 如“计算样式”中所见。

要设置文本的font-style( -variant, -weight,-stretch或line-height(无论您尝试设置为normal))，我们可以完全使用它，也可以使用font简写.

字体CSS属性是用于设置一个速记属性font-style，font-variant，font-weight，font-size，line-height，和font-family...

（有警告）。

至于IE（和FF）和Chrome的区别

Chrome 在逗号分隔的断言中识别出sans-serif normal不是 a 的断言font-family，而 IE 则不能。
如果您将规则简化为：

p.sansserif {
    font-family: sans-serif normal;
}

并在 IE 中查看结果，你会看到<p>是"Times New Roman"因为，虽然 IE 接受声明，但它不能对它做任何明智的事情。

更多来自规格：

...建议引用包含空格、数字或除连字符以外的标点符号的字体系列名称。

碰巧与关键字值（“ inherit”、“ serif”、“ sans-serif”、“ monospace”、“ fantasy”和“ cursive”）相同的字体系列名称必须加引号，以防止与具有相同名称的关键字混淆。

所以建议将一个名为的字体系列sans-serif normal引用为"sans-serif normal".
如果字体系列使用与关键字相同的名称，则必须引用它。

• Chrome和IE会接受Comic Sans MS或Times New Roman 等带或不带引号，并正确运用它们。
• Chrome 拒绝不加引号地使用sans-serif它发现它与 结合的关键字normal，但如果被引用，则将接受两者，尽管它无法应用该字体，除非它可以找到具有该名称的字体。
• IE 接受sans-serif normal可能不带引号的字体系列名称，这可以说是正确的，因为关键字只是假定系列名称的一部分，而不是整个名称。
• Chrome 可以说是错误的，它拒绝了它认为是格式错误的断言。