font-family
font-familyは、フォントの種類を指定するスタイルです。
解説
テキストを表示する時のフォントの種類を指定します。
指定したフォントが閲覧者の環境に存在しない場合は、閲覧者のデフォルトのフォントになってしまいます。 しかし、font-familyでは複数のフォントをカンマ区切りで指定することができ、より先に指定したフォントから優先的に適用されるので、極力希望のフォントで表示させることができます。
値
font-familyには以下の値が指定できます。
| 値 | 説明 |
|---|---|
| フォント | フォント名を指定する （例）font-family:メイリオ; |
サンプル
フォントを「ＭＳ Ｐゴシック」で表示する
.sample01 {
font-family:'ＭＳ Ｐゴシック';
}
<div class="sample01">'ＭＳ Ｐゴシック'で表示されます</div>
'ＭＳ Ｐゴシック'で表示されます
フォントサンプル
明朝系フォント
| フォント種類 | サンプル |
|---|---|
| serif | ABCabc123#$%あいう漢字 |
| Century | ABCabc123#$%あいう漢字 |
| Times New Roman | ABCabc123#$%あいう漢字 |
| Book Antiqua | ABCabc123#$%あいう漢字 |
| Bookman Old Style | ABCabc123#$%あいう漢字 |
| Garamond | ABCabc123#$%あいう漢字 |
| MS Serif | ABCabc123#$%あいう漢字 |
標準フォントで表示されているものは、お使いの環境に対象フォントが無いものです。
ゴシック系フォント
| フォント種類 | サンプル |
|---|---|
| sans-serif | ABCabc123#$%あいう漢字 |
| arial | ABCabc123#$%あいう漢字 |
| arial narrow | ABCabc123#$%あいう漢字 |
| arial black | ABCabc123#$%あいう漢字 |
| Century Gothic | ABCabc123#$%あいう漢字 |
| Gulim | ABCabc123#$%あいう漢字 |
| Impact | ABCabc123#$%あいう漢字 |
| MS Sans Serif | ABCabc123#$%あいう漢字 |
標準フォントで表示されているものは、お使いの環境に対象フォントが無いものです。
等幅フォント
| フォント種類 | サンプル |
|---|---|
| monospace | ABCabc123#$%あいう漢字 |
| Courier | ABCabc123#$%あいう漢字 |
| OCRB | ABCabc123#$%あいう漢字 |
| HG行書体 | ABCabc123#$%あいう漢字 |
| MS ゴシック | ABCabc123#$%あいう漢字 |
| ＭＳ 明朝 | ABCabc123#$%あいう漢字 |
標準フォントで表示されているものは、お使いの環境に対象フォントが無いものです。
装飾系フォント
| フォント種類 | サンプル |
|---|---|
| fantasy | ABCabc123#$%あいう漢字 |
| Monotype Corsiva | ABCabc123#$%あいう漢字 |
標準フォントで表示されているものは、お使いの環境に対象フォントが無いものです。
筆記体フォント
| フォント種類 | サンプル |
|---|---|
| cursive | ABCabc123#$%あいう漢字 |
| Comic Sans MS | ABCabc123#$%あいう漢字 |
| HGP行書体 | ABCabc123#$%あいう漢字 |
| HG正楷書体-PRO | ABCabc123#$%あいう漢字 |
標準フォントで表示されているものは、お使いの環境に対象フォントが無いものです。
日本語フォント
| フォント種類 | サンプル |
|---|---|
| ＭＳ ゴシック | ABCabc123#$%あいう漢字 |
| ＭＳ Ｐゴシック | ABCabc123#$%あいう漢字 |
| ＭＳ Ｐ明朝 | ABCabc123#$%あいう漢字 |
| ＭＳ 明朝 | ABCabc123#$%あいう漢字 |
| メイリオ | ABCabc123#$%あいう漢字 |
| 游ゴシック | ABCabc123#$%あいう漢字 |
| 游明朝 | ABCabc123#$%あいう漢字 |
| ヒラギノ角ゴ | ABCabc123#$%あいう漢字 |
| ヒラギノ丸ゴ | ABCabc123#$%あいう漢字 |
標準フォントで表示されているものは、お使いの環境に対象フォントが無いものです。
備考
- フォント名にスペース（半角、全角とも）が含まれる場合は、シングルクォーテーションまたはダブルクォーテーションで囲う必要があります。
関連項目
- font：フォント関連のスタイルを一括して指定する
- font-family：フォントの種類を指定する
- font-size：文字のサイズを指定する
- font-style：文字のスタイルを指定する
- font-variant：フォントをスモールキャップにする
- font-weight：文字の太さを指定する
