和欧混植の条件分岐

CSS によるフォントの和欧混植は、たいがいの場合、font-family プロパティを使ったシンプルな実装で間に合う。ファミリ名をカンマ区切りのリストとして指定すれば、ユーザーのローカル環境に応じて利用可能なフォントが適切に選択される。

html {
    font-family:
        "Helvetica Neue", "Arial",
        "Hiragino Kaku Gothic ProN", "Meiryo",
        sans-serif;
}

しかし、こういったシンプルなアプローチでは実現できないケースもある。「特定の和文フォントが利用可能な場合に、特定の欧文フォントと組み合わせて利用したい」というのがそれ。たとえば、「ヒラギノ明朝か游明朝のいずれかが利用できるなら Times と組み合わせて使いたいが、どちらの明朝体も利用できないなら Helvetica とゴシック体の組み合わせを使いたい」とか。これを実現するには、なんらかの方法でユーザーのローカル環境で利用できる和文フォントを検出し、その結果に応じて欧文フォントを指定する、という条件分岐が必要になる。

任意のフォントがローカルにインストールされているかどうかを検出するには、グリフの幅が 0 のフォントを利用する手法が良さそうだったので、僕も FontDetect という簡単なライブラリを書いてみた。やっているのは、

  1. 幅が 0 の A だけのフォントを作り、Data URI で CSS に埋め込む
  2. A のテキストをダミーとして HTML に挿入し、1 のフォントを指定する
  3. 目的のフォントファミリを指定し、幅が 0 より大きくなれば true

という流れで、最終的にその結果をModernizr みたいに html 要素のクラス属性に書き込んでいる。

FontDetect.test('mincho', ['Hiragino Mincho ProN', 'Yu Mincho', 'YuMincho']);

この場合、ヒラギノ明朝か游明朝のいずれかが利用できれば mincho、なければ no-mincho というクラス名が html 要素に追加されるので、これをもとに CSS を書き分ければいい。

html {
    font-family:
        "Helvetica Neue", "Arial",
        "Hiragino Kaku Gothic ProN", "Meiryo",
        sans-serif;
}

html.mincho {
    font-family:
        "Times", "Times New Roman",
        "Hiragino Mincho ProN", "Yu Mincho", "YuMincho",
        serif;
}

ウェブフォントの時代になり、こと欧文フォントについては、ユーザーのローカル環境を以前ほどには気にかけることが少なくなった。和文ウェブフォントはまだ気軽に使える状況ではないけど、一方で Windows と Mac に游書体が搭載されたり、源ノ角ゴシックがリリースされたりなど、ローカルでの高品位な和文フォントの選択肢は増えてきている。こういった、ウェブでの和欧混植にまつわる新しい状況を、より効果的に利用する方法のひとつとして考えてみた。