fontでフォントに関する指定や行の高さをまとめて行う【CSS】

fontはフォントに関する指定だったり、行の高さの指定だったり、いくつかのプロパティの指定をまとめて行えるプロパティです。

{font: -style -variant -size/-line-height -family;}

指定できるのは以下6つのプロパティです。

fontの書き方とルール

fontでは先ほど紹介した6つのプロパティをまとめて指定することができます。

必ず全部のプロパティを指定しないといけないわけではなく、font-sizeとfont-familyの2つが必須で、それ以外は省略することも可能。

指定できる値は各プロパティと同じで、省略した値には初期値が適用されます。

6つのプロパティをそれぞれ指定する場合と、fontでまとめて指定する場合を比べてみたいと思います。

.text-ex {
　font-style: italic;
　font-variant: normal;
　font-weight: bold;
　font-size: 14px;
　line-height: 150%;
　font-family: “メイリオ”;
}

まず、これは6つのプロパティをそれぞれ指定した場合。当たり前ですが6行にわたって記述しないといけません。

.text-ex {
　font: italic normal bold 14px/150% “メイリオ”;
}

fontでまとめて指定するとこのようになります。プロパティはfontなので、他のプロパティ（style,variant,weight,size,height,family）は省略されて、値だけ指定する形になります。

line-heightプロパティの値に関しては、font-sizeプロパティのすぐ後にスラッシュ（/）で区切って指定します。

また、font-style,font-variant,font-weightプロパティは、font-sizeプロパティよりも前に指定するように決められていて、font-familyプロパティは最後に指定することになっています。