css - 我需要在 CSS 中用引号括起字体系列名称吗？

Question

我记得很久以前听说在 CSS font-family 属性中将包含多个单词的字体名称用引号括起来被认为是“最佳实践”，如下所示:

font-family: "Arial Narrow", Arial, Helvetica, sans-serif;

不管怎样，我尝试从 "Arial Narrow" 中删除引号，Safari 和 Firefox 在渲染它时没有任何问题。

那么，这个经验法则有任何逻辑吗，还是只是一个神话？这是旧浏览器的问题，不再适用于当前版本吗？我已经这样做了很长时间，以至于我从未停下来思考是否真的有必要。

Answer 1

CSS 2.1 spec告诉我们:

Font family names must either be given quoted as strings, or unquoted as a sequence of one or more identifiers. This means most punctuation characters and digits at the start of each token must be escaped in unquoted font family names.

接着说:

If a sequence of identifiers is given as a font family name, the computed value is the name converted to a string by joining all the identifiers in the sequence by single spaces.

To avoid mistakes in escaping, it is recommended to 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') must be quoted to prevent confusion with the keywords with the same names. The keywords 'initial' and 'default' are reserved for future use and must also be quoted when used as font names.

另请注意标点符号，例如/或 !在标识符内 may also need被引用或转义。