Error: I'm afraid this is the first I've heard of a "$flavour" flavoured Blosxom. Try dropping the "/+$flavour" bit from the end of the URL.

Mon, 25 Jul 2005

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-sizeとfont-familyの値は必須。
• font-sizeを前に、font-familyを後に書く。
• line-heightは省略できる。書くときはfont-size/line-heightのように書く。
• font-style, font-variant, font-weightの値はfont-sizeの前に書く。順序は任意。無くてもよい。
• 複数のプロパティの値による指定以外に、caption, icon等のキーワードによるシステムフォントの指定もできる。

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

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

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