メインコンテンツへスキップ

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