为什么字体名称需要引号？

Question

据我所知，如果字体包含空格，则需要使用双引号或单引号，例如：

font-family: "Times New Roman", Times; 
font-family: 'Times New Roman', Times;

但在Google字体（http://www.google.com/webfont）上，我也看到了

font-family: 'Margarine', cursive;

有些人甚至像这样使用它：

font-family: 'Margarine', 'Helvetica', arial;

我发现这很奇怪，因为以下情况也适用：

font-family: Arial, Helvetica, sans-serif;
font-family: Cambria, serif;

那么CSS中字体名称的引号的正确用法是什么？

Answer 1

您始终可以将特定字体系列名称放在引号中，双引号或单引号，因此Arial，"Arial"和'Arial'是等效的。只有CSS定义的通用字体系列名称如sans-serif必须在没有引号的情况下编写。

与普遍看法相反，不需要引用由空格分隔的名称组成的字体名称，例如Times New Roman。但是，spec 建议“引用包含除连字符以外的空格，数字或标点字符的字体系列名称”

Answer 2

我刚刚了解到引用并不是必需的，而是推荐的。我们每天都学到新东西。

您看到的另一个地方是需要网址的css属性

background:url('hithere.jpg');
background:url(hithere.jpg);

这两种说法都将完全相同。对于字体也是如此，在这种情况下，你使用的引用类型是无关紧要的，只是在你做事的方式上保持一致，这才是最重要的。

Answer 3

有两个原因;

1. 当实际的字体系列名称与通用系列名称共享同一名称时，以避免与具有相同名称的关键字混淆，例如。

p {font-family: 'Shift', sans-serif;}

1. 当字体系列名称中有多个单词时，例如

p {font-family: 'Times New Roman', ..... , a generic family name here ;}

Answer 4

何时引用字体家族：

可选

font-family: Times New Roman;         /* These are equivalent */
font-family: 'Times New Roman';
font-family: "Times New Roman";

font-family: Unique Ode™ ? Épopée;   /* These are equivalent */
font-family: "Unique Ode™ ? Épopée";

font-family: "Answer #42"             /* These are equivalent */
font-family: "Answer \23 42";
font-family: Answer \23 42; 

只要字体名称由字母，数字，短划线，下划线，非ASCII Unicode，单个内部空格和backslash hexadecimal character codes组成，则引号是可选的。单引号或双引号。忽略大小写。有一些奇怪的情况，未加引号的单词不能以数字，破折号或破折号开头。

必须

font-family: "Intro Rust 2"           /* Unquoted words must not start with numbers. */
font-family: "Serif";                 /* For your own Serif, not the generic serif. */
font-family: "Yin/Yang";              /* Quote or code most ASCII punctuation. */

应该

font-family: "Initial Seals JNL"      /* `initial` and `default` are reserved words. */
font-family: "Omar Serif"             /* Generic names might also be reserved words? */

一定不能

font-family: monospace;               /* Generic fonts must NOT be quoted. */
font-family: serif;
font-family: sans-serif;
font-family: cursive;
font-family: fantasy;

谢谢：

• Article on font names，由Mathias Bynens链接，由Stephan B's comment链接。
• bizworld的point关于与通用字体的冲突。
• Mozilla对Custom Identifiers的描述。
• W3C spec代表font-family和identifiers，由Jukka K. Korpela's answer链接

Answer 5

当字体名称中有空格时，您必须使用引号。如果字体名称中没有空格，最好不要使用它们，尽管除了你的文件大小之外不会有任何其他因素让它们保持静止。

示例：

font-family: "Times New Roman", Times; // ok, and best practice
font-family: Times New Roman, Times; // incorrect, Browser won't be able to find Times New Roman
font-family: "Times New Roman", "Times"; // ok, but has extraneous quotes around Times