Html CSS 字体样式更改在 Chrome 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44931208/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Font Style Changes Not Working in Chrome
提问by Achilles
Could someone clarify why the below font style settings is not working in chrome, but working in IE and FireFox.
有人可以澄清为什么下面的字体样式设置在 chrome 中不起作用，但在 IE 和 FireFox 中起作用。
My website has the same problem, it does not pick up the CSS font settings (where normalis mentioned), hence I tested with the CSS test environment from W3Schoolsand the behavior is same.
我的网站有同样的问题，它没有选择 CSS 字体设置（normal提到的地方），因此我使用W3Schools 的 CSS 测试环境进行了测试，行为是相同的。
CSS Snippet:
CSS 片段：
- Working only in IE/FireFox:
font-family: Arial, Helvetica, sans-serif normal; - Working in All Browsers:
font-family: Arial, Helvetica, sans-serif;
- 仅适用于 IE/FireFox：
font-family: Arial, Helvetica, sans-serif normal; - 在所有浏览器中工作：
font-family: Arial, Helvetica, sans-serif;
Try in Chrome and IE to see difference.
尝试在 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>Below are the questions:
以下是问题：
- Could you clarify why the behavior difference between these two browsers?
- How to ensure my CSS font styles are picked by Chrome and IE/FireFox (Should I remove
normalfrom all my CSS files or is there any better way to do it)?
- 您能否澄清为什么这两种浏览器之间的行为差异？
- 如何确保 Chrome 和 IE/FireFox 选择我的 CSS 字体样式（我应该
normal从所有 CSS 文件中删除还是有更好的方法来做到这一点）？
回答by Fred Gandt
Arguably invalidfont-familydeclaration
可以说是无效的font-family声明
If you open your browser's inspector (Ctrl+Shift+iin Chrome) you will see that the CSS rule
如果您打开浏览器的检查器（Chrome 中的Ctrl+ Shift+ i），您将看到 CSS 规则
p.sansserif {
font-family: Arial, Helvetica, sans-serif normal;
}
is not applied.
不适用。
Per the CSS specifications, an invalid rule is ignored, and whatever would have been applied (backwards up the cascade) is applied instead or more accurately, not overruled.
The result is "Times New Roman"in this case - as seen in the "Computed Styles".
根据CSS 规范，无效规则将被忽略，并且会应用任何本应应用的（向后级联），或者更准确地应用，而不是被否决。
结果是"Times New Roman"在这种情况下 - 如“计算样式”中所见。
To set the font-style(-variant, -weight, -stretchor line-height(whichever you were trying to set to normal)) of text, we can either use exactly that, or use the fontshorthand.
要设置文本的font-style( -variant, -weight,-stretch或line-height(无论您尝试设置为normal))，我们可以完全使用它，也可以使用font简写.
The font CSS property is either a shorthand property for setting
font-style,font-variant,font-weight,font-size,line-height, andfont-family...
字体CSS属性是用于设置一个速记属性
font-style，font-variant，font-weight，font-size，line-height，和font-family...
(with caveats).
（有警告）。
As for the difference between IE(and FF) and Chrome
至于IE（和FF）和Chrome的区别
Chrome recognises in the comma delimited assertion that sans-serif normalis not a font-family, whereas IE doesn't.
If you simplify the rule to:
Chrome 在逗号分隔的断言中识别出sans-serif normal不是 a 的断言font-family，而 IE 则不能。
如果您将规则简化为：
p.sansserif {
font-family: sans-serif normal;
}
and view the result in IE, you'll see the <p>is in "Times New Roman"since, although IE accepts the declaration, it can't do anything sensible with it.
并在 IE 中查看结果，你会看到<p>是"Times New Roman"因为，虽然 IE 接受声明，但它不能对它做任何明智的事情。
More from the specs:
更多来自规格：
...it is recommendedto quote font family names that contain white space, digits, or punctuation characters other than hyphens.
Font family names that happen to be the same as a keyword value (‘
inherit', ‘serif', ‘sans-serif', ‘monospace', ‘fantasy', and ‘cursive') mustbe quoted to prevent confusion with the keywords with the same names.
...建议引用包含空格、数字或除连字符以外的标点符号的字体系列名称。
碰巧与关键字值（“
inherit”、“serif”、“sans-serif”、“monospace”、“fantasy”和“cursive”）相同的字体系列名称必须加引号，以防止与具有相同名称的关键字混淆。
So it is recommended that a font family called sans-serif normalbe quoted as "sans-serif normal".
And if a font family is using the same name as a keyword it must be quoted.
所以建议将一个名为的字体系列sans-serif normal引用为"sans-serif normal".
如果字体系列使用与关键字相同的名称，则必须引用它。
- Both Chrome and IE will accept
Comic Sans MSorTimes New Romanetc.with or without quotes, and apply them correctly. - Chrome rejects the unquoted use of the keyword
sans-serifwhere it finds it combined withnormal, but will accept both if quoted, although it won't be able to apply that font unless it can find one with that name. - IE accepts
sans-serif normalas a possibly unquoted font family name, and this is arguably correct, since the keyword is only part of the presumed family name, rather than the whole thing. - Chrome, arguably incorrectly, rejects what it presumes is a malformed assertion.
- Chrome和IE会接受
Comic Sans MS或Times New Roman等带或不带引号，并正确运用它们。 - Chrome 拒绝不加引号地使用
sans-serif它发现它与 结合的关键字normal，但如果被引用，则将接受两者，尽管它无法应用该字体，除非它可以找到具有该名称的字体。 - IE 接受
sans-serif normal可能不带引号的字体系列名称，这可以说是正确的，因为关键字只是假定系列名称的一部分，而不是整个名称。 - Chrome 可以说是错误的，它拒绝了它认为是格式错误的断言。
