CSSのfont一括指定プロパティ

前のレッスンでは、テキストに関する多くのプロパティを詳しく見てきました。 これらのプロパティをそれぞれ個別に記述するのは多くの場合面倒なので、 CSSでは利便性を高めるために特別な一括指定プロパティ font が存在します。 このプロパティは、フォントサイズ、ファミリー、太さ、斜体、 行間を同時に設定することを可能にします。

説明するプロパティの構文は以下の通りです：

font-style font-weight font-size / line-height font-family

ここでプロパティの順序は重要であり、 必須となるのは font-size と font-family です。 上記の構文で説明したプロパティ以外は、 この一括指定プロパティには含まれないことに注意してください。

例を見てみましょう。

例

次のスタイルがあるとします：

cssp {
  font-size: 16px;
  font-family: Arial;
}

これを一括指定プロパティを使って書き直してみましょう：

cssp {
  font: 16px Arial;
}

例

次のスタイルがあるとします：

cssp {
  font-size: 16px;
  font-family: Arial;
  line-height: 50px;
}

これを一括指定プロパティを使って書き直してみましょう：

cssp {
  font: 16px/50px Arial;
}

例

次のスタイルがあるとします：

cssp {
  font-size: 16px;
  font-family: Arial;
  font-weight: bold;
}

これを一括指定プロパティを使って書き直してみましょう：

cssp {
  font: bold 16px Arial;
}

例

次のスタイルがあるとします：

cssp {
  font-size: 16px;
  font-family: Arial;
  font-weight: bold;
  line-height: 50px;
  font-style: italic;
}

これを一括指定プロパティを使って書き直してみましょう：

cssp {
  font: bold italic 16px/50px Arial;
}

実践問題

cssp {
  font-family: "Times New Roman";
  font-size: 13px;
  line-height: 20px;
}

cssp {
  width: 300px;
  font-family: Arial;
  color: red;
  font-size: 40px;
  font-weight: bold;
}

cssp {
  font-family: Arial;
  font-size: 40px;
  font-weight: bold;
  text-indent: 50px;
  font-style: italic;
  line-height: 60px;
}