CSS2.1まとめ書き－font編（HTML・CSSリファレンス）

1年以上前の記事です。内容が古い可能性があります。

HTML5やCSS3がそろそろ出てきそうなこの時期に今更感漂いますが、
現在多く使われているCSS2に関して、プロパティのまとめ書きについてまとめてみました。

まずは、フォント（Font）周りから。

和文フリーフォント集

posted with ヨメレバ

大谷 秀映 翔泳社 2010-12-02

Amazon

楽天ブックス

7net

honto

ブックオフ

e-hon

フォントのサイズを指定します。
上記はフォントのサイズを14pxにする場合の例。
他に％やキーワード（xx-small、medium、x-large等）で指定することもできます。

フォントを太くしたい場合、上記のように書きます。
他に数値（100～900で100刻み）で指定することも可能です。

フォントをイタリック体（斜体）にしたい場合、上記のように書きます。

フォントをスモールキャップス（small caps）にしたい場合、上記のように書きます。
ただし、日本語では余り使うことはありません。

フォントの書体を設定したい場合、上記のように書きます。
フォント名かキーワード（sans-serif、serif等）を順に「,」で区切って書くと左から優先的にある書体を表示します。
フォント名にスペースが入る場合はクォーテーションで囲む必要があります。
「sans-serif」はゴシック系のフォント。「serif」は明朝系のフォントから適当なフォントを選んで表示してくれます。

DTP業界では行送りと呼ばれる行と行の間のスペースを設定します。
上記の表記の場合は文字のサイズの1.5倍（行間は0.5倍）を行送りとして設定しています。
数値＋単位で設定（20px等）することも可能です。

で、それぞれのプロパティをfontプロパティを使って半角スペースで区切ることでまとめて書くことができるんですが、記入するプロパティの順番と、必ず設定しなければならない必須プロパティを気にしないといけません。
基本的な書き方はこんな感じになります。（上記同様の設定をまとめて書いてみます。）

順番を注意すべき点は font-size（14px）→line-height（1.5）→font-family（”ＭＳ Ｐゴシック”,”MS PGothic”,Osaka,sans-serif）。
この前にfont-style（italic）、 font-weight（bold）、 font-variant（small-caps）が入りますがこちらは順不同でも構いません。
つまり、

でもいいわけです。

それと、font-size、font-familyは省略することができません。
したがって

はOKですが、

はNGということになります。

まとめます。（プロパティ名にて表記）

大括弧（［］）内順不同可、赤字必須。