迹忆客 专注技术分享

font-family: 'Comic Sans MS' 中的引号是否需要？

根据 CSS 验证器，引号应该在这种情况下存在，因为字体系列名称包含空格：

包含空格的姓氏应该被引用。 如果省略引号，则名称前后的任何空白字符都将被忽略，并且名称中的任何空白字符序列都将转换为单个空格。

但是，这是 CSS 验证器中的一个错误。 警告消息建议所有包含空格的字体系列名称都应该用引号引起来，这是不正确的。 font-family: Comic Sans MS（不带引号）是完全有效的 CSS，可以按照我们期望的方式工作。

实际上，它有点复杂。 要理解字体家族名称的规则，我们需要先了解 CSS 字符串和标识符之间的区别。

字符串和标识符

规范说明了以下关于字符串的内容：

字符串可以用双引号或单引号书写。

标识符定义如下：

在 CSS 中，标识符（包括元素名称、类和选择器中的 ID）只能包含字符 [a-zA-Z0-9] 和 ISO 10646 字符 U+00A0 及更高版本，加上连字符 (-) 和下划线 (_).

ISO 10646 定义了与 Unicode 标准相关的通用字符集。 请注意，他们实际上是在谈论连字符减号——而不是连字符，即 U+2010。 连字符减号的代码点是 U+002D，下划线（低线）的代码点是 U+005F。 Unicode 目前允许的最高代码点是 U+10FFFF。 因此，标识符中允许匹配正则表达式 [-_a-zA-Z0-9\xA0-\u{10FFFF}] 的任何字符。

规范继续：

[Identifiers] 不能以一个数字、两个连字符或一个连字符后跟一个数字开头。 标识符还可以包含转义字符和任何 ISO 10646 字符作为数字代码 [...]。 例如，标识符 B&W? 可以写成 B\&W\? 或 B\26 W\3F 。

翻译成正则表达式：任何匹配 ^(-?\d|--) 的字符串都不是有效的 CSS 标识符。

空格

CSS 2.1 和 CSS3 字体模块级别 3 规范均表示：

字体系列名称必须以字符串形式引用，或者作为一个或多个标识符的序列不加引号。 这意味着每个标记开头的大多数标点字符和数字必须在不带引号的字体系列名称中进行转义。

注意 ：“一个或多个标识符的序列”意味着多个以空格分隔的标识符将形成一个字体系列名称。 因此，font-family: Comic Sans MS 是有效的，等同于 font-family: 'Comic Sans MS'。 前者由三个空格分隔的标识符组成，后者只是一个字符串。

这在规范中的几段中得到了澄清：

如果标识符序列作为字体系列名称给出，则计算值是通过用单个空格连接序列中的所有标识符而转换为字符串的名称。

前面提到的 CSS 验证器警告描述了如果在标识符序列周围使用前导或尾随空格会发生什么：

[A]名称前后的任何空白字符都将被忽略，并且名称中的任何空白字符序列都将转换为单个空格。

规范文本也暗示了这一点：未转义的空白字符永远不能成为标识符的一部分，因此它永远不能启动“标识符序列”。

通用关键字系列

该规范定义了以下通用系列关键字：serif、sans-serif、cursive、fantasy 和 monospace。 这些关键字可以用作一般的回退机制，以防所需的字体选择不可用。 鼓励作者附加通用字体系列作为提高稳健性的最后选择。 作为关键字，它们不能被引用。

换句话说， font-family: sans-serif 意味着将使用通用的 sans-serif 字体系列，而 font-family: 'sans-serif' （带引号）指的是名称为 sans-serif 的实际字体。 一个非常重要的区别！

其他关键字值

同样的行为也适用于其他几个关键字：

必须引用恰好与关键字值相同的字体系列名称（inherit、serif、sans-serif、monospace、fantasy 和 cursive），以防止与具有相同名称的关键字混淆。 关键字 initial 和 default 保留供将来使用，用作字体名称时也必须用引号引起来。 用户代理不得将这些关键字视为匹配 <family-name> 类型。

请注意 ，所有关键字都不区分大小写。 例如，Monospace、monospace 和 mOnOsPaCe 都引用相同的关键字，如果我们想使用具有该确切系列名称而不是默认关键字值的字体，则需要将其引用。

总结

只要在其他方面有效的标识符中唯一不允许的字符是单个 U+0020 空格字符，并且所有以空格分隔的部分都是不是关键字的有效标识符，标识符序列就可以用作不带引号的字体系列名称。

如果字体系列名称与关键字匹配，则必须将其加引号以形成字符串。

如果你想使用一个无效的 CSS 标识符作为字体系列名称的（一部分），你需要用引号将它括起来形成一个字符串； 或者你可以转义任何特殊字符，这样它就可以保持不带引号的标识符。

以下是一些示例字体系列声明：

/* Invalid because `/` is not allowed in an identifier: */
font-family: Red/Black;
/* Valid — an escaped `/` symbol is allowed in an identifier: */
font-family: Red\/Black;
/* Invalid because a string cannot be combined with an identifier: */
font-family: 'Lucida' Grande;
/* Valid — it’s a single string: */
font-family: 'Lucida Grande';
/* Valid — it’s a space-separated sequence of two identifiers: */
font-family: Lucida Grande;
/* Valid — it’s still a space-separated sequence of two identifiers: */
font-family: Lucida     Grande;
/* Invalid because `!` is not allowed in an identifier: */
font-family: Ahem!;
/* Valid — it’s a string: */
font-family: 'Ahem!';
/* Valid — an escaped `!` is allowed in an identifier: */
font-family: Ahem\!;
/* Invalid because an identifier cannot start with a digit: */
font-family: Hawaii 5-0;
/* Valid — it’s a string: */
font-family: 'Hawaii 5-0';
/* Valid — `\35 ` (including the space) is an escape sequence for `5`: */
font-family: Hawaii \35 -0;
/* Valid — `\ ` (including the space) is an escape sequence for ` `: */
font-family: Hawaii\ 5-0;
/* Invalid — `$` is not allowed in an identifier: */
font-family: $42;
/* Valid — an escaped `$` symbol is allowed in an identifier: */
font-family: \$42;
/* Valid — `€` is allowed in an identifier: */
font-family: €42;

除了关键字，我只能想到一个字体系列名称，不能在没有引号的情况下使用——没有办法在标识符中对它进行转义。 你知道是哪一个吗？