フォントと行の高さをまとめて指定する

font

{ font 【 フォント 】 : -style -variant -weight -size -line-height -family; }

fontプロパティは、フォントと行の高さのプロパティをまとめて指定するショートハンドです。

初期値 各プロパティに準じる
継承 各プロパティに準じる
適用される要素 すべての要素
モジュール CSS Fonts Module Level 3

値の指定方法

指定できる値は各プロパティと同様です。font-size、font-familyプロパティの値は必須で、この2つ以外は省略可能です。省略した値は各プロパティの初期値が適用されます。

font-style、font-variant、font-weightプロパティは、font-sizeプロパティよりも前に指定します。また、line-heightプロパティは、font-sizeプロパティに続けてスラッシュ（/）のあとに指定します。font-familyプロパティは必ず最後に指定します。

.text-type01 {
  font: italic normal bold 12px/150% "メイリオ",sans-serif;
}

サンプルコード

上の例で指定したfontプロパティは、各プロパティを以下のように指定した場合と同様の表示になります。

.text-type01 {
  font-style: italic;
  font-variant: normal;
  font-weight: bold;
  font-size: 12px;
  line-height: 150%;
  font-family: "メイリオ",sans-serif;
}

関連記事