跳到主要內容

字型名稱必須加上引號

要求或禁止字型系列名稱的引號。

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

此規則檢查 font 和 font-family 屬性。

此規則忽略 $sass、@less 和 var(--custom-property) 變數語法。

fix 選項 可以自動修正此規則報告的大部分問題。

選項​

字串："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; }