フォントのスタイルシートを一度に指定する

font

CSSの書き方

font:font-styeの値 font-variantの値 font-weightの値 font-sizeの値 / line-heightの値 font-familyの値 … ;

CSSの詳細情報
プロパティ名 font 読み方 フォント
初期値 各プロパティの初期値 意味 フォント制御
各プロパティで設定可能な値
対象 すべての要素
CSSレベル CSSレベル1 対応ブラウザ Windows MAC
継承 する IE 5.0以上/FF1.0/NS7.1/OP8.0 SF/IE5.0

解説

フォント装飾のスタイルシートの一部をまとめて記述する方法です。

値としては以上の6つのプロパティの値を同時に書くことができますが、以下のような制限があります。

1つめの決まり

まず、最初の3つ(font-styefont-variantfont-weight)に関してですが、表記の順序に決まりはなく、順不同です。

また、各プロパティは省略も可能です。

この場合、各プロパティの初期値が割り当てられます。

2つめの決まり

残りの3つ(font-sizeline-heightfont-family)に関してですが、ここで省略可能なプロパティは「line-height」のみです。

それ以外の2つについては必須プロパティです。

これら2つに合わせて「line-height」プロパティも記述する場合には、font-sizeの値との間に「 / (半角スペース+/+半角スペース)」を挿入する必要があります。

CSS/HTMLサンプル

body { font:italic bold 20px / 130% arial; }

BODY要素にいくつかのフォントプロパティを一括指定 サンプル

【厳選】合わせて読みたいおすすめ書籍

WEB制作支援サイトのHTMLタグボードだからオススメできる厳選書籍です。私が読んでいない本はオススメしません。

HTMLやCSS、Webデザインを体系的に学ぶなら

CSSを駆使したモダンなWebデザインを学ぶなら

最新情報をチェックしよう!