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>

以下是问题：

• 能否解释一下为什么这两种浏览器之间的行为差​​异？
• 如何确保 Chrome 和 IE/FireFox 选择我的 CSS 字体样式（我应该从我的所有 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" - 如“计算样式”中所示。

要设置文本的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 接受声明，但它无法对它做任何明智的事情。

更多来自规格：

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

恰好与关键字值相同的字体系列名称（'inherit'、'serif'、'sans-serif'、'monospace'、'fantasy'和'@ 987654356@') 必须加引号，以免与同名关键字混淆。

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

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

Answer 2

or p.font{
   font-family: font;
   align-text: center;
}