うたたね

とあるフリーランスのねごと

フォント指定するとき「"」ダブル「'」シングルどっちを使うべきか

HTML / CSS

f:id:utataneclub:20190906214132p:plain

CSSでフォントを指定する時、ダブルクォーテーション「"」とシングルクォーテーション「'」どちらを使うべきかよく悩んでいました。

font-family: メイリオ, Verdana;
font-family: 'メイリオ', 'Verdana';
font-family: "メイリオ", "Verdana";


いろんなサイトのCSSを見みても上記のようにバラバラだったりして、何が違うのだろう？といつも疑問だったので今回調べてみました。

どっちの記号を使ったら良いのか？

結論「どっちでも良い」

まさかのダブルクォーテーション（"）またはシングルクォーテーション（'）のどちらで囲っても良いという結論でした。

フォントの指定方法

記号で囲む条件

  • フォント名にスペースを含む場合
  • フォント名が日本語表記の場合

記号で囲まない条件

  • フォント名にスペースが含まれない場合
  • WindowsやMacに標準インストールされているフォントを指定する場合

フォント名の指定の仕方

  • 日本語フォント名は英表記でフォント名も併記する

例

font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', メイリオ, Verdana;

まとめ

  • どちらのクォーテーションを使っても良い
  • フォント名に日本語、スペースを含む場合は「"」「'」を使う
  • 日本語フォント名はブラウザによっては認識できないこともあるので、英文字でのフォント名も併記する


は〜、超すっきりしました。

同じ悩みを抱えている人のお役に立てますように。

それでは。




参考