fontプロパティはややこしい

CSSのfontプロパティでは、フォントに関する複数のプロパティの値を一括で指定できますが、その書き方には結構ややこしいところがあります。例えば、

font-size: 1em;
line-height: 1.5em;
font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-family: verdana,serif;

という指定を短く書こうとして、

font: 1em/1.5em bold italic small-caps verdana,serif

と書くのは誤りです。何故かというと、font-style, font-variant, font-weightの値は、font-sizeの値より前に書く必要があるからです。文法上、font-size/line-heightの後にはfont-familyの値が書かれることになっているので、この例だとブラウザはおそらく "bold italic small-caps verdana" という文字列をひとつのフォント名と解釈してしまうでしょう。

以下のように書くと、最初の例と同等の指定になります。

font: bold italic small-caps 1em/1.5em verdana,serif;

fontプロパティの文法規則については、CSS 2.1仕様の'font' propertyの項に書かれています。

[ [ <'font-style'> || <'font-variant'> || <'font-weight'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar | inherit

とは言えこれだと分かりにくいので、注意点を言葉で書いてみると、

……ということになるでしょうか。

他の注意点としては、fontプロパティではフォント関連のプロパティを全て初期値にリセットした上で、与えられた値を割り当てるという性質があります。そのためfont-style, font-variant, font-weight, line-heightは省略しても値が継承されません(font: inherit;とした場合を除いて)。

また、最初に挙げたfont指定の例のように、正しい書き方でないと意図通りの指定がされず、しかも一見どこに誤りがあるのか分からない、という状況に陥ることになります。なので慣れないうちはfontプロパティを使わず、個々のプロパティを記述した方が無難だと自分は考えています。

参照した記事

font指定の例は、Ten CSS tricks you may not know : evolt.org, Codeより引用しました。

Ten CSS tricks you may not know : evolt.org, Codeの記事は、あなたの知らないかもしれないCSS | textocean経由で拝見しました。なおこちらの記事で「font-sizeとline-heightの記入が必須」と書かれていますが、line-heightは省略できます。

あなたの知らないかもしれないCSS | textoceanの記事は、Re: あなたの知らないかもしれないCSS: 5. こだわりのh1 [/design/html] - 行動記録経由で拝見しました。

CSS仕様についてはREC-CSS2 邦訳の15.2.5 フォントの簡略化プロパティも参考にしました。