font

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

CSSレイアウト実践講座

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

運営者プロフィール

運営者ブログ*

お問い合わせ

font

フォントに関する値を一括で指定するプロパティ。

fontプロパティを使用することで、フォント関連の次のプロパティの値を一括で指定することができる。

font-style font-styleの解説ページを参照
font-variant font-variantの解説ページを参照
font-weight font-weightの解説ページを参照
font-size font-sizeの解説ページを参照
font-height line-heightの解説ページを参照
font-family font-familyの解説ページを参照

以上6つの値のうち、font-sizefont-familyは省略することができない。
また、それぞれの値は次の順序で指定しなければならない。

  1. font-style、font-variant、font-weight(このグループ内では順不同。)
  2. font-size
  3. line-height
  4. font-family

使用例

サンプル(A)

[CSSの記述]

.sample { font:bold 16px/40px monospace; }

[HTMLの記述]

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

[ブラウザ上の表示]

太字、サイズ16px、行の高さ40px、等幅フォントを指定