font
- ブラウザ
フォント関連をまとめて指定
font: 値;
フォント関連のスタイルを一括で指定するプロパティです。
font: italic normal bold 80%/150% "ＭＳ Ｐゴシック";
| プロパティ名 | 値 | 説明 |
|---|---|---|
| font | font-style の値 | フォントのスタイルを指定 |
| font-variant の値 | スモールキャピタルを指定 | |
| font-weight の値 | フォントの太さを指定 | |
| font-size の値 | フォントのサイズを指定 （必須） | |
| line-height の値 | 行の高さを指定 | |
| font-family の値 | フォントを指定 （必須） |
- 「font-size」と「font-family」の値が必須となります。この2つ以外の値は省略が可能で、省略した場合はそのプロパティの初期値が適用されることになります。
- それぞれの値は、半角スペースで区切って記述します。「line-height」を指定する場合は、「font-size」の後にスラッシュ（ / ）を入れ、その後に記述します。
値の記述順序
このプロパティの値は、次の順序で記述する必要があります。
font: font-style font-variant font-weight font-size/line-height font-family;
最初の3つ（font-style、font-variant、font-weight）は順不同ですが、それ以外は上記の順序で記述しなければなりません。
システムフォントの指定
fontプロパティは、システムフォントを指定することもできます。指定できる値は次の通りです。
- caption … キャプションで使用されているフォント
- icon … アイコンの名前で使用されているフォント
- menu … メニューで使用されているフォント
- message-box … ダイアログで使用されているフォント
- small-caption … キャプションで使用されている小さめのフォント
- status-bar … ウィンドウのステータスバーで使用されているフォント
上記の値を指定すると、フォントの種類、サイズ、太さ、スタイルなどが、そのシステムフォントに合わせて設定されることになります。
※システムフォントの値は単独で使用します。他の値と同時に指定することはできません。
.example1 {
font: italic normal bold 80%/150% "ＭＳ Ｐゴシック",sans-serif;
}
.example2 {
font: 80% sans-serif;
}
.example3 {
font: menu;
}
