CSSのフォントの種類「font-family」について

CSSではフォントの種類を指定することができます。当サイトはWindowsで見た場合、メイリオかMS Pゴシックで表示されるようになっています。

image01

そのパソコンに存在するフォントでしか表現することができませんので、特殊な文字を指定しても、そのPCにインストールされていなければ、自動的に他のフォントに置き換えられてしまいます。

一般的に使われているフォントは以下のようになっています。

  • Windows・・・メイリオ、MS Pゴシック、MS P明朝
  • Mac・・・ヒラギノ

WindowsはVista以降は、デフォルトフォントがメイリオになっていますが、XP以前はMS Pゴシックです。XPにもメイリオをインストールすることはできますが、多くの人がMS Pゴシックのまま使用していると思います。

font-familyのルールについては、「いまさら聞けないCSS font-familyのまとめ」が参考になります。

font-familyの指定

body {
    font-family: メイリオ,Meiryo,”ヒラギノ角ゴ Pro W3″,”Hiragino Kaku Gothic Pro W3″,”MS Pゴシック”,sans-serif;
    }

フォントの指定は「font-family:」で行うことになります。先に指定したフォントが優先して表示されるフォントです。

この記述の場合、たとえばWindowsPCであれば、基本的にはメイリオで表示され、メイリオが入っていないPCの場合には、MS Pゴシックで表示されることになります。

font-familyを指定しなくても、自動的にそのPCのデフォルトフォントで表示されますので、絶対に設定が必要な項目ではありませんが、指定しているサイトが多いと思います。

フォントの違いによる横幅の違い

フォントによって文字の大きさが変わってきますので、指定したフォントによって一行に収まる文字数が変わってきます。横幅と縦幅に制限がないエリアであれば、どのフォントを指定しても良いのですが、横幅に制限があるグローバルナビゲーションや見出しなどでフォントを指定する時は注意しなければなりません。

フォントはPCやブラウザによっても多少見え方が異なりますが、大きく変わるのは、メイリオのような等幅フォントとMS Pゴシックのようなプロポーショナルフォントの違いです。

等幅フォントは、フォント毎の幅が一定ですが、プロポーショナルフォントは、フォントごとに幅が異なるため、どちらの文字で表示されるかによって横幅が大きく変わってきます。

基本的には等幅フォントの方が横幅が広くなりますので、等幅フォントで見た時に合わせてデザインしておけばデザインが崩れることは無いのですが、太文字(ボールド)を使う場合には、状況が変わってきます。

MS Pゴシックの漢字は幅が広くなりますので、漢字のみの太字で比較した場合、メイリオよりもMS Pゴシックの方が横幅が広くなります。

ですので、この記事で書かれているように、グローバルナビゲーションなどの横幅が制限される場所において、センタリング表示+太字で利用する場合には、最も広くなるMS Pゴシックの幅に合わせてデザインする必要があります。

全てのPCに同じフォントが入っていれば良いのですが、現在主流であるWindows7とWindowsXPでは、デフォルトフォントが異なっていますし、XPでもメイリオを入れている人と入れていない人がいるため、ブラウザチェックする際には、その辺にも気をつけなければなりません。

管理人イチオシのレンタルサーバー

当サイトでも使っているエックスサーバーは、ディスク容量が200Gと大きく、MySQLが50個まで使えますので、1つの契約でいくつものサイトを運営することができます。

転送量が月2,000G、メモリ192Gと他の格安サーバーでは見られないスペックとなっており、アクセス数の多いサイトや複数のWordPressサイトを運営するのにも向いています。

自動バックアップと電話サポートが付いているので、初心者の方でも安心!

エックスサーバーでは無料SSLが利用できます。Googleはhttpsのサイトを評価する傾向があり、今後はSSL化が必須になってくるでしょう。無料SSLは簡単に導入できるのでとても助かっています。

エックスサーバーの公式サイトへ

サブコンテンツ

このページの先頭へ