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

Question

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

我的网站有同样的问题，它没有提取CSS字体设置（提到normal），因此我使用the CSS test environment from W3Schools测试，行为相同。

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>

以下是问题：

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

Answer 1

可以说无效 font-family声明

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

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

未应用。

根据CSS specifications，将忽略无效规则，并且应用已经应用的任何内容（向后向上级联），或者更准确地应用，而不是否决。
在这种情况下，结果为"Times New Roman" - 如＆＃34; Computed Styles＆＃34;中所示。

设置font-style（-variant，-weight，-stretch或line-height（无论您尝试设置为normal））我们可以使用font shorthand。

  

字体CSS属性是用于设置font-style，font-variant，font-weight，font-size，line-height和font-family的简写属性...

（caveats）。

至于IE（和FF）和Chrome

之间的区别

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

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

并在IE中查看结果，您会看到<p>在"Times New Roman"，因为虽然IE接受了声明，但它无法做任何明智的事情。< / p>

更多来自规格：

  

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

     

字体系列名称恰好与关键字值相同（“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，可以说是错误的，拒绝它认为是一个格式错误的断言。