font-family

CSSプロパティ「font-family」の解説とサンプル。

CSSレイアウト実践講座

CSSレイアウト実践講座について

運営者プロフィール

運営者ブログ*

お問い合わせ

font-family

フォントの種類を指定するプロパティ。

値を指定することで、個別のフォントを指定したり、フォントの系統を指定することができる。「,」(カンマ)で区切り複数のフォントを指定することで、ユーザーのパソコンに指定フォントが存在しない場合に備えることができる。

フォント名 「MS P ゴシック」や「MS 明朝」など、フォント名を値として指定。ただし、ユーザーのパソコン内にそのフォントが存在しない場合は適用されない。
語句で指定 sans-serif(ゴシック体)、serif(明朝体)、cursive(筆記体)、fantasy(装飾系フォント)、monospace(等幅)のいずれかを指定。

使用例 - サンプル(A) / サンプル(B)

サンプル(A)

[CSSの記述]

.sampleA { font-size:20px; font-family:"MS 明朝"; }

[HTMLの記述]

<p class="sampleA">テキストテキスト</p>

[ブラウザ上の表示]

フォントに「MS 明朝」を指定

サンプル(B)

[CSSの記述]

.sampleA { font-size:20px; font-family:monospace; }

[HTMLの記述]

<p class="sampleB">テキストテキスト</p>

[ブラウザ上の表示]

フォントに「等幅フォント」を指定