Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

CSSプロパティ辞典

font

文字(フォント)に関する項目をまとめて指定できます。まとめて指定できるプロパティは『font-style』プロパティ、『font-variant』プロパティ、『font-weight』プロパティ、『font-size』プロパティ、『line-height』プロパティ、『font-family』プロパティとなります。

値を記述する際にルールがあり、それに則っていない場合は『font』プロパティに関する項目は全て無効とされますのでご注意ください。詳しくは後述します。

サンプルコード
/* フォントサイズを『16p』x、行の高さを『20px』、フォントファミリーを『sans-serif』に指定。 */
p.test { font: 16px/20px sans-serif;}

/* フォントの太さを『bold』、フォントスタイルを『italic』、フォントサイズを 『16px』、フォントファミリーを『serif』に指定。 */
p.test1 { font: bold italic 16px serif;}
ブラウザでの表示結果
<p style=" font: 16px/20px sans-serif;">ここはp要素です。『font: 16px/20px sans-serif』と指定しています。</p>

<p style=" font: bold italic 16px serif;">ここはp要素です。『font: bold italic 16px serif』と指定しています。</p>

対応ブラウザ
IE6 IE7 IE8 IE9 IE10 IE11 Safari Chrome Firefox Opera

iPhone Safari Android2系 標準ブラウザ Android4系 標準ブラウザ

概要

文字(フォント)に関する項目をまとめて指定できます。

値を記述する際に以下のルールがあります。このルールに則っていない場合は『font』に関する値は完全に無効とされますのでご注意ください。

  • font-size』プロパティと『font-style』プロパティ、『font-family』プロパティの値は全て指定する必要があります。
  • font-style』プロパティ、『font-variant』プロパティ、『font-weight』プロパティを定義するときには『font-size』プロパティの値よりも前に指定する必要があります。
  • line-height』プロパティの値を設定する場合は『font-size』の値の直後に『/』で区切って指定する必要があります。
  • 必須項目である『font-family』プロパティの値は『font』プロパティの最後の値として指定する必要があります。

『font』プロパティで『line-height』プロパティの値を設定する場合のサンプルは以下です。『/』を使って区切ります。

/* フォントサイズを『16p』x、行の高さを『20px』、フォントファミリーを『sans-serif』に指定。 */
p.test { font: 16px/20px sans-serif;}

そして『font』プロパティから直接指定ができませんが、『font-stretch』プロパティ、『font-size-adjust』プロパティ、『font-kerning』の値は全て初期値にリセットされます。

このように『font』プロパティはルールが分かりづらく、直接指定できないプロパティが初期値に戻されたりするため、あまり使い勝手が良いプロパティとは言えません。使用する際はご注意ください。

記事の間違いや著作権の侵害等ございましたらお手数ですがまでご連絡頂ければ幸いです。