我是否需要在 CSS 中的字体家族名称周围加引号？

我记得很久以前听说过，在 CSS font-family 属性中包含多个单词的字体名称周围加引号被认为是“最佳实践”，比如:

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

我尝试从 "Arial Narrow"和 Safari 中删除引号，而且 Firefox 渲染它没有任何问题。

那么，这个经验法则有什么逻辑吗? 还是只是一个神话？旧版本的浏览器不再适用于当前版本是否存在问题？我干这行太久了，从没停下来想过这是否真的有必要。

43988 次浏览
小开
最佳答案

The CSS 2.1 spec tells us that:

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.

It goes on to say:

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:

So yes, there is a difference, but one that's unlikely to cause any problems. Personally, I have always quoted font names when they contain spaces. In a few (presumably very rare) cases, the quotes are absolutely required:

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.

Also note that punctuation such as / or ! within an identifier may also need to be quoted or escaped.

小开

According to the CSS Fonts Module Level 3 spec of October 2013, "font family names other than generic families must either be given quoted as strings, or unquoted as a sequence of one or more identifiers". So you DO NOT need to enclose them in quotes.

However, if you don't "most punctuation characters and digits at the start of each token must be escaped". To avoid escaping mistakes, the W3C actually recommends to quote font family names containing white space, digits, punctuation or keyword values (‘inherit’, ‘serif’, etc.).

The generic font family names (‘serif’, ‘sans-serif’, ‘cursive’, ‘fantasy’, and ‘monospace’) MUST NOT be quoted as they are actually keywords.

小开

If style is inline, like <font style="font-family:Arial Narrow">some texte</font>, it works.

But if the name of the police font contains some special characters, or starts with a number contains a quotes or others strange things (like "01 Digitall" or "a_CityNovaTitulB&WLt" or "Bailey'sCar"), you must use a special syntax with &quot; which can be applied to all kinds of stranges fonts names:

<font style="font-family:&quot;a_CityNovaTitulB&WLt&quot; , &quot;Bailey'sCar&quot;">some text</font>

In FireFox,the source will show the &quot; as this: "

without this trick, this:

<font style="font-family:a_CityNovaTitulB&WLt ,Bailey'sCar">some text</font>

doesn't automatically work in every browser. It's useful for font name witch start by a number to, like "8 Pin".


提交答案