font-family …… フォントの種類を指定する
広告
font-familyプロパティは、フォントの種類を指定する際に使用します。
フォントの種類はカンマ（ , ）で区切って複数の候補を並べることができます。
複数の候補を記述しておくことで、先に記述した順にユーザー環境で利用可能なものが選択され、
より多くのユーザーに対して自分のイメージに近いフォントで表示させることができます。
指定したフォントがユーザーの環境にインストールされていない場合には、ブラウザで設定されたデフォルトのフォントで表示されます。
■値
- フォント名で指定
- ｢ＭＳ ゴシック｣や｢ＭＳ 明朝｣のようにフォント名で指定します。フォント名にスペースが含まれている場合には、ダブルクォーテーション（ ” ）またはシングルクォーテーション（ ‘ ）で囲むようにしてください。
- キーワードで指定
- フォントの種類を表すキーワードで指定します。
sans-serif …… ゴシック系のフォント
serif …… 明朝系のフォント
cursive …… 筆記体・草書体のフォント
fantasy …… 装飾的なフォント
monospace …… 等幅フォント
■使用例
スタイルシート部分は外部ファイル（sample.css）に記述。
p.sample1 {font-family: “ＭＳ ゴシック”,sans-serif;
}
p.sample2 {font-family: “ＭＳ 明朝”,serif;
}
p.sample3 {font-family: Impact,Charcoal;
}
HTMLソース
<html>
<head>
<link rel=”stylesheet” href=”sample.css”
type=”text/css”>
</head>
<body>
<p class=”sample1″>スタイルシートでＭＳ ゴシックを指定。</p>
<p class=”sample2″>スタイルシートでＭＳ 明朝を指定。</p>
<p class=”sample3″>abcdefgABCDEFG0123456789</p>
</body>
</html>
↓↓↓
ブラウザ上の表示
スタイルシートでＭＳ ゴシックを指定。
スタイルシートでＭＳ 明朝を指定。
abcdefgABCDEFG0123456789
■関連項目
font …… フォントに関する指定をまとめて行う
font-style …… フォントをイタリック体・斜体にする
font-variant …… フォントをスモールキャップにする
font-weight …… フォントの太さを指定する
font-size …… フォントのサイズを指定する
font-family …… フォントの種類を指定する
font-size-adjust …… フォントのサイズを調整する
font-stretch …… フォントを縦長・横長にする
font-style …… フォントをイタリック体・斜体にする
font-variant …… フォントをスモールキャップにする
font-weight …… フォントの太さを指定する
font-size …… フォントのサイズを指定する
font-family …… フォントの種類を指定する
font-size-adjust …… フォントのサイズを調整する
font-stretch …… フォントを縦長・横長にする
広告
