web-dev-qa-db-ja.com

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

CSSフォントファミリプロパティに複数の単語を含むフォント名を引用符で囲むのは、次のように「ベストプラクティス」と見なされていたということをずっと前に聞いたことを覚えています。

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

そのために、"Arial Narrow"から引用符を削除しようとしましたが、SafariとFirefoxでのレンダリングに問題はありません。

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

86
daGUY

CSS 2.1仕様 は、次のことを示しています。

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

それは言い続けます:

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

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

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

キーワード値と同じフォントファミリ名(「継承」、「セリフ」、「サンセリフ」、「モノスペース」、「ファンタジー」、「筆記体」)は、キーワードとの混同を防ぐために引用符で囲む必要があります同じ名前で。キーワード「initial」および「default」は将来の使用のために予約されており、フォント名として使用する場合も引用符で囲む必要があります。

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

75
James Allardice

2013年10月の CSS Fonts Module Level 3 spec によれば、「汎用ファミリ以外のフォントファミリ名は、文字列として引用符で囲むか、1つのシーケンスとして引用符で囲まないでください。以上の識別子」。 したがって、引用符で囲む必要はありません。

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

一般的なフォントファミリ名(「serif」、「sans-serif」、「cursive」、「fantasy」、および「monospace」)は実際にはキーワードであるため、引用符で囲むことはできません。

17
djip.co

スタイルがインラインの場合、<font style="font-family:Arial Narrow">some texte</font>、 できます。

ただし、ポリシングフォントの名前に特殊文字が含まれている場合、または数字で始まる引用符やその他の奇妙なもの(「01 Digitall」、「a_CityNovaTitulBWLt」、「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ピン」のような数字で始まるフォント名に便利です。

0
internetdev