CSSでフォントファミリー名を引用符で囲む必要がありますか?


92

次のように、CSSのfont-familyプロパティに複数の単語を含むフォント名を引用符で囲むことが "ベストプラクティス"と見なされていたと聞いたことがあります。

font-family: "Arial Narrow", Arial, Helvetica, sans-serif;

とりあえず、引用を削除してみましたが"Arial Narrow"、SafariとFirefoxではレンダリングに問題はありません。

それで、この経験則には何らかの論理がありますか、それとも単なる神話ですか?現在のバージョンに適用されなくなった古いブラウザーの問題でしたか?私はこれを長い間続けてきたので、それが実際に必要であるかどうか考えるのをやめませんでした。


一般的なフォントファミリーではなく、すべてのフォントファミリーを引用することをお勧めします。一貫性を保ちます。
ミカヘニング

回答:


78

CSS 2.1仕様では、ということを教えてくれる:

フォントファミリ名は、文字列として引用するか、1つ以上の識別子のシーケンスとして引用しないで指定する必要があります。つまり、各トークンの先頭にあるほとんどの句読文字と数字は、引用符で囲まれていないフォントファミリ名でエスケープする必要があります。

それは続けて言う:

識別子のシーケンスがフォントファミリ名として指定されている場合、計算された値は、シーケンス内のすべての識別子を単一のスペースで結合することによって文字列に変換された名前です。

エスケープの間違いを避けるために、空白、数字、またはハイフン以外の句読文字を含むフォントファミリ名を引用することをお勧めします。

はい、違いがありますが、問題が発生する可能性はほとんどありません。個人的には、スペースが含まれているフォント名を常に引用してきました。いくつかの(おそらく非常にまれな)ケースでは、引用符が絶対に必要です。

キーワードの値と同じフォントファミリ名( 'inherit'、 'serif'、 'sans-serif'、 'monospace'、 'fantasy'、 'cursive')は、キーワードとの混同を防ぐために引用符で囲む必要があります同じ名前で。キーワード 'initial'および 'default'は将来の使用のために予約されており、フォント名として使用する場合も引用符で囲む必要があります。

/または!などの句読点にも注意してください。識別子内では、引用符またはエスケープする必要がある場合もあります。


6
initialそして、default(彼らは将来の使用のために予約している)、あまりにもキーワードです。CSSでの引用符のないフォントファミリー名を参照してください。
Mathias Bynens、2012

21

2013年10月のCSSフォントモジュールレベル3仕様によると、「一般的なファミリ以外のフォントファミリ名は、文字列として引用するか、1つ以上の識別子のシーケンスとして引用しないでください」。したがって、それらを引用符で囲む必要はありません。

ただし、これを行わない場合、「各トークンの先頭にあるほとんどの句読文字と数字はエスケープする必要があります」。間違いを回避するために、W3Cは実際には、空白、数字、句読点、またはキーワード値(「継承」、「セリフ」など)を含むフォントファミリー名を引用することを推奨しています

一般的なフォントファミリー名(「serif」、「sans-serif」、「cursive」、「fantasy」、「monospace」)は、実際にはキーワードであるため、引用符で囲まないでください。


0

のようにスタイルがインラインの場合<font style="font-family:Arial Narrow">some texte</font>、機能します。

ただし、警察のフォントの名前に特殊文字が含まれている場合、または数字で始まる場合、引用符またはその他の奇妙なもの(「01 Digitall」、「a_CityNovaTitulB&WLt」、「Bailey'sCar」など)が含まれている場合は、次の特殊構文を使用する必要があります。&quot; これは、あらゆる種類のストレンジフォント名に適用できます。

<font style="font-family:&quot;a_CityNovaTitulB&WLt&quot; , &quot;Bailey'sCar&quot;">some text</font>

FireFoxでは、ソースに&quot;が表示されます。このように:"

このトリックなしで、これ:

<font style="font-family:a_CityNovaTitulB&WLt ,Bailey'sCar">some text</font>

すべてのブラウザで自動的に機能するわけではありません。「8ピン」のように数字で始まるフォント名の魔女に便利です。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.