font
fontは、フォント関連のスタイルを一括して指定するスタイルです。
解説
フォントに関するスタイルをまとめて指定する時に使用します。
指定できるスタイルは以下６つです。
- font-style
- font-weight
- font-size
- font-family
- font-variant
- line-height
値と値の間は半角スペースで区切って指定します。
６種類のスタイルを全て指定しなくてもOKですが、font-size値とfont-family値の２つは必須です。また、font-family値は一番最後に指定する必要があります。
値
fontに指定できる値は、下記それぞれのページをご覧ください。
サンプル
フォントを「斜体、太字、22px、serif体」で表示する
.sample01 {
font: italic bold 22px serif;
}
<div class="sample01">Hello world!</div>
Hello world!
フォントを「28px、メイリオ」、行の高さを1.8 で表示する
.sample02 {
font: 28px/1.8 メイリオ;
}
<div class="sample02">こんにちは！</div>
こんにちは！
行の高さは、font-size値の後ろに「/」で区切って指定します。
備考
- font-style値、font-weight値、font-variant値はfont-size値より前に指定する必要があります。
関連項目
- font：フォント関連のスタイルを一括して指定する
- font-family：フォントの種類を指定する
- font-size：文字のサイズを指定する
- font-style：文字のスタイルを指定する
- font-variant：フォントをスモールキャップにする
- font-weight：文字の太さを指定する
