fontプロパティ

フォント関連のプロパティを一括指定することができます。

fontプロパティに指定できる値

fontプロパティには次のプロパティの値を一括で指定することができます。

これらのプロパティのうち、font-sizeプロパティとfont-familyプロパティの指定は必須になり、さらにfont-familyプロパティの指定は一番最後にする必要があります。

font-sizeプロパティとline-heightプロパティの2つを並べて指定する場合は、値の間に「/(半角スラッシュ)」が必要です。

font-sizeプロパティとfont-familyプロパティを指定する例です。
font-familyプロパティは「,」で区切り、複数指定することが可能です。

.text1 {
  font: 30px 'Noto Serif JP',serif;
  text-indent: -0.1em;
  color: #222;
}

<p class="text1">こちらはフォントのCSSのためのサンプルです。Cascading Style Sheet.</p>

font-weightプロパティ、font-sizeプロパティ、line-heightプロパティ、font-familyプロパティを指定する例です。
font-sizeプロパティとline-heightプロパティは「/」で区切って指定します。

.text2 {
  font: 700 30px / 1.2em 'Noto Serif JP',serif;
  text-indent: -0.1em;
  color: #222;
}

<p class="text2">こちらはフォントのCSSのためのサンプルです。Cascading Style Sheet.</p>

fontプロパティで指定できる全てのプロパティの値を指定する例です。

.text3 {
  font: italic small-caps 700 30px / 1.6em 'Noto Sans JP',sans-serif;
  text-indent: -0.1em;
  color: #222;
}

<p class="text3">こちらはフォントのCSSのためのサンプルです。Cascading Style Sheet.</p>