CSS3: font-family プロパティ - フォントの種類

■ 概要

項　　目説　　明
記述形式 セレクタ {font-family: 値1, 値2, ... , 値n; }
値 の形式 フォント名 または キーワード　（以下の解説を参照）
初 期 値 なし
対応ブラウザー C1+ / e3+ / N4+ / Fx1+ / Op3.5+ / Ch1+ / Sa1+
適用可能な要素 すべての要素
継　　承 する

■ 解説

font-family プロパティ は，フォントの種類 を指定します。

フォントの種類の指定方法には，次のようなものがあります。（CSSプロパティの値の指定方法の詳細は，CSSの解説を参照してください）

指定方法 説　明
フォント名
"ＭＳ ゴシック" や "ＭＳ 明朝" などのフォント名で指定します。　なお，フォント名にブランク（空白）が含まれている場合には，フォント名全体を（"）や （'）でくくります。
 キーワードで指定 
 sans-serif
Helvetica，Arial などのひげ飾りがつかないフォント。　日本語ではゴシック系フォント。
 serif
Times，Century などのひげ飾りがついたフォント。　日本語では明朝系フォント。
 cursive
筆記体・草書体のフォント。
 fantasy
装飾的なフォント。
 monospace
等幅のフォント。

閲覧者の環境ではフォントが存在しない場合のことを配慮して，複数のフォントの種類を指定することができます。　この場合，指定した順番で最初に利用可能なものが使用されます。

■ 使用例（ font-family プロパティの利用）

たとえば，次のように使用できます。

HTMLソース
CSS
<head> ～ </head>		 
<style type="text/css">
   <!--
     .ff1 {font-family: "Times New Roman";}
     .ff2 {font-family: "Monotype Corsiva";}
     .ff3 {font-family: "ＭＳ 明朝", serif;}
     .ff4 {font-family: "ＭＳ Ｐゴシック";}
     .ff5 {font-family: "HG正楷書体-PRO";}
   -->
</style>
HTML
<body> ～ </body>		 
<span class="ff1">{font-family: "Times New Roman";} のフォント</span><br>
<span class="ff2">{font-family: "Monotype Corsiva";} のフォント</span><br>
<span class="ff3">{font-family: "ＭＳ 明朝", serif;} のフォント</span><br>
<span class="ff4">{font-family: "ＭＳ Ｐゴシック";} のフォント</span><br>
<span class="ff5">{font-family: "HG正楷書体-PRO";} のフォント</span><br>

ブラウザー 表示例
{font-family: "Times New Roman";} のフォント
{font-family: "Monotype Corsiva";} のフォント
{font-family: "ＭＳ 明朝", serif;} のフォント
{font-family: "ＭＳ Ｐゴシック";} のフォント
{font-family: "HG正楷書体-PRO";} のフォント

■ 備考

【参考ページ】