【CSS】fontプロパティをショートハンドで記述する順番と注意点

CSSではショートハンドという簡単な書き方が出来るプロパティがいくつかあります。

fontプロパティをショートハンドでの記述する順番をいつも忘れてしまうのでメモ書きです。

ついでにfontプロパティをショートハンドで書くときの注意点についてもまとめてご紹介します。

ショートハンドとは1行でまとめて書くやつです

下記のように一行で様々なプロパティを内包した記述の仕方がショートハンドというやつです。

font: italic bold .8em/1.2 Arial, sans-serif;

これはつまり下記の記述と同じ意味ですが、一行でまとめて書けて楽ちんというメリットがあります。またGoogleもショートハンドでの記述を推奨しています。

font-style:  italic;
font-weight: bold;
font-size:   .8em;
line-height: 1.2;
font-family: Arial, sans-serif;

ショートハンドで書くと、省略した値に初期値が割り当てられてすべて上書きされていってしまいます。

たとえば、font-style: italic;のままでいいやと思って書きもらすと、まさかのfont-style: normal;になってしまうというわけです。

継承じゃなくて初期値で上書きされるというやっかいな現象。

というわけで、ショートハンドで書くのはbodyの中だけにするとか、ある程度限定的に使う方がいいと思います。

サイズだけ変えたいことなんてしょっちゅうありますからね。そういうときはfont-sizeプロパティを使いましょう。

参考記事：CSS ショートハンド・プロパティの問題点 · terkel.jp

記述が楽になるからと取り入れたショートハンドでかえって手間になることがあるという訳ですね。

便利な方法ですが、特性を知ってうまく付き合っていきましょう。