Widely available YES。主要ブラウザで広く対応済み。本番利用を推奨。

概要

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以上を推奨します。