CSS3スタイル虎の巻

font-family

font-familyは、フォントの種類を指定するスタイルです。

解説

テキストを表示する時のフォントの種類を指定します。

指定したフォントが閲覧者の環境に存在しない場合は、閲覧者のデフォルトのフォントになってしまいます。
しかし、font-familyでは複数のフォントをカンマ区切りで指定することができ、より先に指定したフォントから優先的に適用されるので、極力希望のフォントで表示させることができます。

font-familyには以下の値が指定できます。

説明
フォントフォント名を指定する
(例)font-family:メイリオ;

サンプル

フォントを「MS Pゴシック」で表示する


.sample01 {
  font-family:'MS Pゴシック';
}

<div class="sample01">'MS Pゴシック'で表示されます</div>
'MS Pゴシック'で表示されます

フォントサンプル

明朝系フォント

フォント種類サンプル
serifABCabc123#$%あいう漢字
CenturyABCabc123#$%あいう漢字
Times New RomanABCabc123#$%あいう漢字
Book AntiquaABCabc123#$%あいう漢字
Bookman Old StyleABCabc123#$%あいう漢字
GaramondABCabc123#$%あいう漢字
MS SerifABCabc123#$%あいう漢字

標準フォントで表示されているものは、お使いの環境に対象フォントが無いものです。

ゴシック系フォント

フォント種類サンプル
sans-serifABCabc123#$%あいう漢字
arialABCabc123#$%あいう漢字
arial narrowABCabc123#$%あいう漢字
arial blackABCabc123#$%あいう漢字
Century GothicABCabc123#$%あいう漢字
GulimABCabc123#$%あいう漢字
ImpactABCabc123#$%あいう漢字
MS Sans SerifABCabc123#$%あいう漢字

標準フォントで表示されているものは、お使いの環境に対象フォントが無いものです。

等幅フォント

フォント種類サンプル
monospaceABCabc123#$%あいう漢字
CourierABCabc123#$%あいう漢字
OCRBABCabc123#$%あいう漢字
HG行書体ABCabc123#$%あいう漢字
MS ゴシックABCabc123#$%あいう漢字
MS 明朝ABCabc123#$%あいう漢字

標準フォントで表示されているものは、お使いの環境に対象フォントが無いものです。

装飾系フォント

フォント種類サンプル
fantasyABCabc123#$%あいう漢字
Monotype CorsivaABCabc123#$%あいう漢字

標準フォントで表示されているものは、お使いの環境に対象フォントが無いものです。

筆記体フォント

フォント種類サンプル
cursiveABCabc123#$%あいう漢字
Comic Sans MSABCabc123#$%あいう漢字
HGP行書体ABCabc123#$%あいう漢字
HG正楷書体-PROABCabc123#$%あいう漢字

標準フォントで表示されているものは、お使いの環境に対象フォントが無いものです。

日本語フォント

フォント種類サンプル
MS ゴシックABCabc123#$%あいう漢字
MS PゴシックABCabc123#$%あいう漢字
MS P明朝ABCabc123#$%あいう漢字
MS 明朝ABCabc123#$%あいう漢字
メイリオABCabc123#$%あいう漢字
游ゴシックABCabc123#$%あいう漢字
游明朝ABCabc123#$%あいう漢字
ヒラギノ角ゴABCabc123#$%あいう漢字
ヒラギノ丸ゴABCabc123#$%あいう漢字

標準フォントで表示されているものは、お使いの環境に対象フォントが無いものです。

備考

  • フォント名にスペース(半角、全角とも)が含まれる場合は、シングルクォーテーションまたはダブルクォーテーションで囲う必要があります。

関連項目

  • font:フォント関連のスタイルを一括して指定する
  • font-family:フォントの種類を指定する
  • font-size:文字のサイズを指定する
  • font-style:文字のスタイルを指定する
  • font-variant:フォントをスモールキャップにする
  • font-weight:文字の太さを指定する