【font】フォントのプロパティをまとめて指定

fontプロパティは、フォントに関する複数のプロパティをまとめて設定できるプロパティです。 設定できるプロパティはfont-style、font-variant、font-weight、font-size、line-height、font-familyの6種類があります。

この中から必要な値をスペースで区切って複数指定して下さい。 ただし指定する順序には決まりがあり、font-sizeとline-heightはスラッシュ「/」で区切って指定します。 省略された値については初期値(各プロパティを参照)が適用されますが、font-sizeとfont-familyは省略することができませんので、注意して下さい。

また指定する順序は下記のようになっています。

  1. font-style、font-variant、font-weight(順不同)
  2. font-size(省略不可)
  3. line-height(値の前に「/」をつける)
  4. font-family(省略不可)

font-style、font-variant、font-weightの3つに関しては、順序を入れ替えて指定する事ができます。 line-heightの値を指定する場合は、「1.5em/120%」のように必ず値の前にスラッシュ「/」を付けて下さい。 また省略された値については、親要素に指定している値が継承されるわけではありませんので注意して下さい。

なおfontプロパティではシステムフォントを指定する事もできますが、上記のように複数のプロパティの値を設定した場合は、システムフォントを示す値は使用できません。

書式

  • font : ★ ★ ★ ♥/▲ ♦ ……… フォント関連を一括指定する

★:font-style、font-variant、font-weightの値
♥:font-sizeの値(省略不可)
▲:line-heightの値
♦:font-familyの値(省略不可)

※font-familyプロパティ、またはfontプロパティでフォントファミリー名を指定する場合は、「MS ゴシック」などの名前に入っているスペースや文字の半角・全角を正確に入力する必要がありますのでご注意下さい。

使用した時の例

.sample {font:italic bold 15px/150% "MS Pゴシック";}
.sample2 {font:italic small-caps normal 1em/150% "Times New Roman",serif;}
<body>
<p class="sample">
イタリック体、太字、サイズ15px、行高さ150%、MSPゴシック(font-variantを省略)<br />
イタリック体、太字、サイズ15px、行高さ150%、MSPゴシック(font-variantを省略)<br />
イタリック体、太字、サイズ15px、行高さ150%、MSPゴシック(font-variantを省略)
</p>
<p class="sample2">
font-style、font-variant、font-weight、font-size/line-height、font-family(省略なし)
</p>
</body>

ブラウザ上の表示例

イタリック体、太字、サイズ15px、行高さ150%、MSPゴシック(font-variantを省略)
イタリック体、太字、サイズ15px、行高さ150%、MSPゴシック(font-variantを省略)
イタリック体、太字、サイズ15px、行高さ150%、MSPゴシック(font-variantを省略)

font-style、font-variant、font-weight、font-size/line-height、font-family(省略なし)

対応ブラウザなどのデータ

初期値 個別のプロパティを参照 値の継承 継承する
適用可能な要素 すべての要素
メディア visual
対応ブラウザ Internet Explorer3~ , Google Chrome1~ , Firefox1~ , Opera3.5~ , Safari1~