今回はfontというプロパティを紹介します。
fontはふぉんとに大事なことなのでわかりやすく解説していきます。

fontプロパティとは？

fontプロパティは、フォントに関する指定を行う際に使用します。
指定できるのは、font-size、font-weight、line-height、
font-family、font-style、font-variantの6つのプロパティの値です。

marginなどのようにショートハンドを使用しまとめて書くこともできますが、
逆にわかりずらくなることが多いので個別に指定することをおすすめします。

文字サイズを変えられる「font-size」

font-sizeを指定すると文字の大きさを変えることができます。
指定するときは「font-size:20px;」と言う風に指定します。

値はwidthなどと同じように「px」や「%」を使用したり、
「em」や「rem」という単位を使ったりします。

See the Pen dKOOrz by kiharaneko (@kiharaneko) on CodePen.

文字の太さを指定する「font-weight」

font-weightを指定すると、文字の太さを変更することができます。
ただし、使用しているフォントの種類に指定した太さがない場合、太さは変わりません。
フォントの種類についてはfont-familyで説明します。

値には数値指定かキーワード指定の2種類があります。

数値指定

100、200、300、400、500、600、700、800、900
数字が大きくなるほど太くなっていきます。

キーワード指定

normal …… 初期値の標準的な太さです。（数値で400を指定した場合と同じ）
bold …… 一般的な太字の太さです。（数値で700を指定した場合と同じ）
lighter …… 相対的に一段階細くします。
bolder …… 相対的に一段階太くします。

See the Pen pKNRej by kiharaneko (@kiharaneko) on CodePen.

行の高さを指定できる「line-height」

line-heightを指定すると、行の高さを変更することができます。
値には「px」「%」「em」を指定することも可能ですが、
line-heightでは数字のみで指定することが多いです。
line-height:1.5;と指定した場合、「1.5em」や「150%」と
指定したときと同じになります。

See the Pen bKBgKG by kiharaneko (@kiharaneko) on CodePen.

行の高さとフォントサイズの関係ですが、
例えばline-heightが20pxでfont-sizeが16pxの場合、
20px（行の高さ）から16px（フォントサイズ）を引いた残りの4pxが、
行間として上下均等に2pxずつ割り振られます。

また、行の高さがフォントサイズより小さな値の場合には、
複数行になったときに行が重なって表示されます。

フォントの種類を指定できる「font-family」

font-familyを指定すると、フォントの種類を変更することができます。

See the Pen bKBqvq by kiharaneko (@kiharaneko) on CodePen.

フォントのスタイルを指定できる「font-style」

font-styleを指定すると、フォントのスタイルを変更することができます。
指定できる値は、normal(標準・初期値)、italic(イタリック体)、oblique(斜体)です。

日本語フォントの場合、italic(イタリック体)やoblique(斜体)が
用意されていることはほとんどなく、 標準のものを斜めに傾けて表示しています。
正直、日本だと使う機会は少ないと思います。

See the Pen jKVBXZ by kiharaneko (@kiharaneko) on CodePen.

フォントをスモールキャップにする「font-variant」

font-variantを指定すると、フォントをスモールキャップに変更できます。
指定できる値は、normal(標準・初期値)、small-caps(スモールキャップ)です。
スモールキャップとは、小文字が小文字サイズの大文字になっているものを指します。
指定したフォントにスモールキャップがない場合には、大文字を縮小したものを
小文字として表示します。おそらくほとんど使う機会はないでしょう。

See the Pen BVQWgZ by kiharaneko (@kiharaneko) on CodePen.