【CSS】font-family を見直してみた

CSSのfont-familyの書き方がいまいちわからず、これまでは参考ページのCSSを単純にコピペしてきました。

でも最近ようやく書き方がわかってきたようです。

フォントファミリー

わかっているようでよくわかっていなかったのが、

• フォントをダブルクォーテーション（"）またはシングルクォーテーション（'）のどちらで囲むべきなのか
• 囲んでないフォントもあるけどどう違うのか
• 「tahoma」や「Verdana」というフォント名が最初に来るパターンも見られるがなぜなんだろう

いろいろ調べていくと次のようなことがわかってきましたよ。

• ｢MS ゴシック｣や｢MS 明朝｣のようにフォント名にスペースが含まれる、あるいは日本語表記の場合は、フォント名をクォーテーションで囲むということ。
• その際ダブルクォーテーション（"）またはシングルクォーテーション（'）のどちらで囲ってもよいということ。
• 日本語フォント名はブラウザによっては認識できないこともあるので、英文字でのフォント名も併記しておくということ。
• tahomaやVerdanaというフォントはモニター画面上で非常に読みやすく、またWindowsに標準でインストールされているので重宝されているらしいこと。

ということで当ブログでは font-family をあらためて以下のようにしてみました。

font-family: Tahoma, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", sans-serif;

でもこの問題は非常にデリケートであり、OSやブラウザの違いでいかようにも表示される可能性があるので、思い切って何も指定しないってのもありかも。

以上です。