構文

font-family : 種類;

説明文

　「font-family」では，表示に利用するフォントを指定する。表示したいフォント名を指定すればよい。この際，フォント名の中にスペースが入っていると正常に解釈できなくなる場合があるため，ダブル・クォーテイション（"..."）でフォント名をくくるようにする。

　しかし，システムによってインストールされているフォントは異なる。例えば，Windowsで利用できる「ＭＳ ゴシック」は，Linuxでは用意されていない。そのため，システムによっては指定したフォントが存在せず，意図したようなフォントで表示できない場合がある。

　そこで，以下のようなあらかじめ定義されたフォント名を利用することが可能だ。

フォント名意味
serif明朝体
sans-serifゴシック体
cursive筆記体
fantasy装飾文字
monospace等幅フォント

　これらの停止されたフォント名はWebブラウザで設定されたフォントを利用する。つまり，「sans-serif」を指定すれば，Windowsでは「ＭＳ ゴシック」，Linuxでは「さざなみゴシック」といった，それぞれのOSで利用できるゴシック体のフォントで表示されるようになる。ただし，ユーザーがWebブラウザの設定を変更している場合は，sans-serifを指定してもゴシック体で表示されるとは限らない。

　font-familyはカンマ（,）で区切りながら複数のフォントを指定できる。この場合，始めに指定したフォントが存在しない場合は，次に記載したフォントを利用する。例えば，以下のように指定すると，「ＭＳ ゴシック」が存在しない場合は「MS UI Gothic」を，それでも存在しない場合は「sans-serif」で表示する。

p { font-family : "ＭＳ ゴシック","MS UI Gothic","sans-serif"; }

使用例

● CSSの定義

h2 { font-family : serif; }
p { font-family : "HGP白洲行草書体";

● HTMLの例

<h2>Cascading Style Sheets</h2>
<p>スタイルシートは，文字のフォントを指定することができます。また，他の
フォントも併用して記述することで，1つ目のフォントがインストールされていな
い場合，次のフォントが利用される。</p>

● 表示結果

Internet Explorerの表示例
[画像のクリックで拡大表示]
Firefoxの表示例
[画像のクリックで拡大表示]

関連項目