跳至主要内容

font-family-name-quotes

要求或禁止对字体系列名称使用引号。

a { font-family: "Times New Roman", 'Ancient Runes', serif; }
/**              ↑               ↑  ↑             ↑
 *               These quotation marks and this one */

此规则检查 font 和 font-family 属性。

此规则忽略 $sass、@less 和 var(--custom-property) 变量语法。

该 fix 选项 可以自动修复此规则报告的大多数问题。

选项​

string: "always-where-required"|"always-where-recommended"|"always-unless-keyword"

请阅读以下内容以了解这些选项:

  • font 和 font-family 属性接受一个简短的特殊关键字列表：inherit、serif、sans-serif、cursive、fantasy、system-ui、monospace、ui-serif、ui-sans-serif、ui-monospace 和 ui-rounded。如果您将这些词用引号括起来，浏览器将不会将它们解释为关键字，而是会查找具有该名称的字体（例如，会查找 "sans-serif" 字体）——这几乎永远不是您想要的。相反，您使用这些关键字来指向内置的通用回退（对吧？）。因此，以下所有选项都强制对这些关键字不使用引号。（如果您确实想使用名为 "sans-serif" 的字体，请关闭此规则。）
  • 引号在规范中建议 使用，其中“字体系列名称包含空格、数字或除连字符以外的标点符号”。
  • 当字体系列名称不是 有效的 CSS 标识符 时，需要在字体系列名称周围使用引号。例如，如果字体系列名称包含 $、! 或 /，则需要在它周围使用引号，但如果它仅包含空格或（非初始）数字或下划线，则不需要使用引号。您可以肯定，您使用的几乎所有字体系列名称都是有效的 CSS 标识符。
  • 在供应商前缀的系统字体（如 -apple-system 和 BlinkMacSystemFont）周围永远不应使用引号。

有关这些细微差别的更多信息，请阅读 Mathias Bynens 撰写的 “CSS 中未加引号的字体系列名称”。

警告

此规则目前不理解 Mathias 描述的转义序列。如果您想使用字体系列名称“Hawaii 5-0”，则需要用引号将其括起来，而不是将其转义为 Hawaii \35 -0 或 Hawaii\ 5-0。

"always-unless-keyword"​

期望在每个不是关键字的字体系列名称周围使用引号。

以下模式被视为问题

a { font-family: Arial, sans-serif; }
a { font-family: Times New Roman, Times, serif; }
a { font: 1em Arial, sans-serif; }

以下模式不被视为问题

a { font-family: 'Arial', sans-serif; }
a { font-family: "Times New Roman", "Times", serif; }
a { font: 1em 'Arial', sans-serif; }

"always-where-required"​

仅在根据上述标准需要使用引号时才期望使用引号，并在所有其他情况下禁止使用引号。

以下模式被视为问题

a { font-family: "Arial", sans-serif; }
a { font-family: 'Times New Roman', Times, serif; }
a { font: 1em "Arial", sans-serif; }

以下模式不被视为问题

a { font-family: Arial, sans-serif; }
a { font-family: Times New Roman, Times, serif; }
a { font-family: "Hawaii 5-0"; }
a { font: 1em Arial, sans-serif; }

仅在根据上述标准建议使用引号时才期望使用引号，并在所有其他情况下禁止使用引号。（这包括所有需要使用引号的情况。）

以下模式被视为问题

a { font-family: Times New Roman, Times, serif; }
a { font-family: MyFontVersion6, sake_case_font; }
a { font-family: 'Arial', sans-serif; }
a { font: 1em Times New Roman, Times, serif; }

以下模式不被视为问题

a { font-family: 'Times New Roman', Times, serif; }
a { font-family: "MyFontVersion6", "sake_case_font"; }
a { font-family: Arial, sans-serif; }
a { font: 1em 'Times New Roman', Times, serif; }