Font shorthand
font-style、font-variant、font-weight、font-size、line-height、font-familyを一行で指定できるショートハンドプロパティです。コードの簡潔化と可読性の向上に貢献します。ただし、指定しないプロパティは初期値にリセットされるため、意図しないリセットに注意が必要です。
概要
font-style、font-variant、font-weight、font-size、line-height、font-familyを一行で指定できるショートハンドプロパティです。コードの簡潔化と可読性の向上に貢献します。ただし、指定しないプロパティは初期値にリセットされるため、意図しないリセットに注意が必要です。
対応ブラウザ
デスクトップ
Chrome 1+
Edge 12+
Safari 1+
Firefox 1+
モバイル
Chrome Android 18+
Safari iOS 1+
Firefox Android 4+
基本構文
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以上を推奨します。