Font shorthand
font は CSS の一括指定プロパティで、要素のフォントの様々なプロパティをすべて設定します。また、要素のフォントにシステムフォントを設定することもできます。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 1 | 18 | 1 | |
caption | 1 | 12 | 1 | 1 | 18 | 1 |
icon | 1 | 12 | 1 | 1 | 18 | 1 |
menu | 1 | 12 | 1 | 1 | 18 | 1 |
message-box | 1 | 12 | 1 | 1 | 18 | 1 |
small-caption | 1 | 12 | 1 | 1 | 18 | 1 |
status-bar | 1 | 12 | 1 | 1 | 18 | 1 |
基本構文
CSS
.title {
font: bold 1.5rem/1.4 "Noto Sans JP", sans-serif;
}
.caption {
font: italic small-caps 0.875rem/1.6 serif;
}ライブデモ
実務での使いどころ
-
テキストスタイルの簡潔な指定
複数のフォントプロパティをfontショートハンドで一行にまとめ、CSSコードの記述量を削減して保守性を高めます。
注意点
- fontショートハンドは省略されたプロパティを初期値にリセットするため、個別に設定した値が上書きされないか確認してください。
アクセシビリティ
- font-sizeとline-heightは読みやすさに直結するため、本文テキストのline-heightは1.5以上を推奨します。