Skip to main content

font-family-name-quotes

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

¥Require or disallow quotes for font family names.

a { font-family: "Times New Roman", 'Ancient Runes', serif; }
/**              ↑               ↑  ↑             ↑

 *               These quotation marks and this one */

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

¥This rule checks the font and font-family properties.

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

¥This rule ignores $sass, @less, and var(--custom-property) variable syntaxes.

fix 选项 可以自动修复此规则报告的大部分问题。

¥The fix option can automatically fix most of the problems reported by this rule.

选项​

¥Options

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

¥Please read the following to understand these options:

  • font 和 font-family 属性接受特殊关键字的简短列表：inherit、serif、sans-serif、cursive、fantasy、system-ui、monospace、ui-serif、ui-sans-serif、ui-monospace、ui-rounded、emoji、math 和 fangsong。如果你将这些单词放在引号中，浏览器不会将它们解释为关键字，而是会查找该名称的字体（例如，将查找 "sans-serif" 字体） - 这几乎不是你想要的。相反，你使用这些关键字来指向内置的通用后备（对吗？）。因此，下面的所有选项都强制这些关键字不加引号。（如果你确实想使用名为 "sans-serif" 的字体，请关闭此规则。）

    ¥The font and font-family properties accept a short list of special keywords: inherit, serif, sans-serif, cursive, fantasy, system-ui, monospace, ui-serif, ui-sans-serif, ui-monospace, ui-rounded, emoji, math and fangsong. If you wrap these words in quotes, the browser will not interpret them as keywords, but will instead look for a font by that name (e.g. will look for a "sans-serif" font) -- which is almost never what you want. Instead, you use these keywords to point to the built-in, generic fallbacks (right?). Therefore, all of the options below enforce no quotes around these keywords. (If you actually want to use a font named "sans-serif", turn this rule off.)

  • 引号建议 在规范中 与 "包含空格、数字或标点符号（连字符除外）的字体系列名称"。

    ¥Quotes are recommended in the spec with "font family names that contain white space, digits, or punctuation characters other than hyphens".

  • 当字体系列名称不是 有效的 CSS 标识符 时，需要用引号引起来。例如，如果字体系列名称包含 $、! 或 /，则需要在其周围加上引号，但仅仅因为它包含空格或（非初始）数字或下划线，则不需要引号。你可能可以打赌，你使用的几乎每个字体系列名称都将是有效的 CSS 标识符。

    ¥Quotes are required around font-family names when they are not valid CSS identifiers. For example, a font family name requires quotes around it if it contains $, ! or /, but does not require quotes just because it contains spaces or a (non-initial) number or underscore. You can probably bet that almost every font family name you use will be a valid CSS identifier.

  • 切勿在浏览器前缀系统字体（例如 -apple-system 和 BlinkMacSystemFont）周围使用引号。

    ¥Quotes should never be used around vendor prefixed system fonts such as -apple-system and BlinkMacSystemFont.

有关这些微妙之处的更多信息，请阅读 Mathias Bynens 的 "CSS 中不带引号的字体系列名称"。

¥For more on these subtleties, read "Unquoted font family names in CSS", by Mathias Bynens.

[!警告] 此规则目前无法理解 Mathias 描述的转义序列。如果你想使用字体系列名称 "夏威夷 5-0"，则需要将其用引号引起来，而不是将其转义为 Hawaii \35 -0 或 Hawaii\ 5-0。

¥[!WARNING] This rule does not currently understand escape sequences such as those described by Mathias. If you want to use the font family name "Hawaii 5-0" you will need to wrap it in quotes, instead of escaping it as Hawaii \35 -0 or Hawaii\ 5-0.

"always-unless-keyword"​

每个非关键字的字体系列名称都需要引号。

¥Expect quotes around every font family name that is not a keyword.

{
  "font-family-name-quotes": "always-unless-keyword"
}

以下模式被视为问题：

¥The following patterns are considered problems:

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

以下模式不被视为问题：

¥The following patterns are not considered problems:

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

"always-where-required"​

仅当根据上述标准需要引号时才期望引号，并且在所有其他情况下不允许引号。

¥Expect quotes only when quotes are required according to the criteria above, and disallow quotes in all other cases.

{
  "font-family-name-quotes": "always-where-required"
}

以下模式被视为问题：

¥The following patterns are considered problems:

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

以下模式不被视为问题：

¥The following patterns are not considered problems:

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; }

仅当根据上述标准推荐引号时才期望引号，并且在所有其他情况下不允许引号。（这也包括需要引号的所有情况。）

¥Expect quotes only when quotes are recommended according to the criteria above, and disallow quotes in all other cases. (This includes all cases where quotes are required, as well.)

{
  "font-family-name-quotes": "always-where-recommended"
}

以下模式被视为问题：

¥The following patterns are considered problems:

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; }

以下模式不被视为问题：

¥The following patterns are not considered problems:

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; }