CSSでフォント・ファミリーのショートカットを作る

最近のブラウザーではlocal()を使ってフォント・ファミリーのショートカット(的なもの)を作ることができる。CSS Fontsモジュール仕様のsrcプロパティーの項にも思いっきり書いてあるんだけど、今まではそんなに必要なかったのであまり使われていない。5ウェイト展開なヒラギノ角ゴのiOS 7へのバンドルと、3ウェイト展開の游ファミリのWindowsへのバンドルにより必要性が少し増えた気がする。

特に游(ゴシック|明朝)はWindows 8.1とOS X 10.9でファミリ名が違う上、少し古いFirefoxでのアレとか、OS Xには細字がないとかもあるので、色々考慮するとfont-familyプロパティーではややこしいフォント指定を行う必要が出てくる。そうやって出来た長いリストのfont-familyは読みづらく、デバッグのしづらさにつながる。local()を使ってフォント名を作り直してやることにより、多少は読みやすくデバッグできるCSSが書けると思う。

今後使うこともあるであろう、body要素でヒラギノ角ゴか游ゴシック、h1要素でヒラギノ角ゴか游ゴシックの細字を使うケースを例にしてみる。まずは普通に書く。

font-familyプロパティーによるスタック

body {
  font-family: "Hiragino Kaku Gothic ProN", "游ゴシック", "Yu Gothic", sans-serif;
}

h1 {
  font-family: ".HiraKakuInterface-W2", "游ゴシック Light", "Yu Gothic Light", sans-serif;
  font-weight: 300;
}

使いたいフォントをそれぞれのルールセットで直接指定するだけの普通の書き方。だが、フォント・ファイルそのものやブラウザーの実装がしっかりしていたら本来は必要のないはずの冗長なファミリー指定で、あんまり美しくないCSSだと思う。

@font-face定義によるファミリーの作成

@charset "UTF-8";

@font-face {
  font-family: "MySansSerif";
src: local(".HiraKakuInterface-W2"), local("游ゴシック Light"), local("Yu Gothic Light");
     font-weight: 300;
     font-style: normal;
}

@font-face {
  font-family: "MySansSerif";
src: local("Hiragino Kaku Gothic ProN"), local("游ゴシック"), local("Yu Gothic");
     font-weight: normal;
     font-style: normal;
}

body {
  font-family: "MySansSerif", sans-serif;
}

h1 {
  font-weight: 300;
}

@font-face定義でMySansSerifというフォント・ファミリーを新しく作るとすると以上のようになる。local()で使いたいフォントを並べて(スタックはしないので順不同)指定しておくと、body要素のみでファミリー指定するだけで良くなる、というわけ。h1要素ではウェイトの指定のみになりすっきり。@font-face定義は別に管理すれば良いので、bodyやh1要素のルールセットの読みやすさは格段に上がる。Sassユーザーならパーシャルにして使い回しすることもでき、生産性を上げるのに助けになるはず。

読みやすいかどうかが@font-face定義の文法をきちんと知っているかどうかに依存するので、一般的に読みやすいかというと……。今のところは「ただダラダラと並べるだけでなく、こういう書き方も出来ますよ」程度に覚えておくくらいで良さそう。