CSSのfont-familyに長いこと悩んで最近こうなった

ヒラギノ角ゴとメイリオの並び順については、Macにメイリオがインストールされている場合よりも、Windowsにヒラギノがインストールされている場合のほうが結果が悲惨、ということもあり、メイリオを先にもってくるケースが多いらしい（下記URL参照）。自分も基本的にはこんな感じでフォント指定していた。

http://loconet.web2.jp/blog/archives/2007/02/cssfontfamily.html
http://webbingstudio.com/weblog/think/entry-137.html

ところが、いつだったか、ここはてなブログのソースコードを眺めていて、こんな記述に気付いた。

if (~navigator.userAgent.indexOf('Mac OS X')) {
  document.write('<style type="text/css">html, body { font-family: \x27Helvetica\x27, \x27Arial\x27, \x27ヒラギノ角ゴ Pro W3\x27, \x27Hiragino Kaku Gothic Pro\x27, sans-serif; } </style>');
} else {
  document.write('<style type="text/css">html, body { font-family: \x27Helvetica\x27, \x27Arial\x27, \x27メイリオ\x27, \x27Meiryo\x27, \x27MS PGothic\x27, sans-serif; } </style>');
}

JavaScriptでOSを判別してフォントを選択してます。「おー」と思って、その後はこれをパクっていた。

技術的な内容の文章を書く場合は、日本語の文章中に現れる英単語は等幅にしたいので、HelveticaとかArialのところはTwitter Bootstrapのcode要素のスタイルをパクってMonaco, Menlo, Consolas, 'Courier New' と並べることがよくあった。

そして最近、@font-face の local() とかいうのを知って、あーこれ便利だなと。@font-face はWebフォントのために使うものというイメージしかもっていなかったけれど、ローカルにある複数フォントに優先度つけた上でそれに名前をつける、ような使い方ができるとのこと。ユニコードの範囲でフォントを分けることもできるらしい。

@font-face {
  font-family: OreOreFont;
  src:
    local('メイリオ'),
    local('Meiryo'),
    local('ヒラギノ角ゴ Pro W3'),
    local('Hiragino Kaku Gothic Pro'),
    local('MS PGothic'),
    local(sans-serif);
}

@font-face {
  font-family: OreOreFont;
  src:
    local('Monaco'),
    local('Menlo'),
    local('Consolas'),    
    local('Courier New'),
    local('Courier'),
    local(monospace);
  unicode-range: U+0000-007F;
}

html,body {
  font-family: OreOreFont;
}

OSを判別できるわけではないので、ヒラギノとメイリオの並び順問題を解決できるわけではないけれど、どこかのサーバに自分専用CSSを置いていくつかフォントを定義しておけばコピペせずに使いまわせるので、便利。並び順はもうどうでもよくなってきた。必要ならこれとJavaScriptによるOS判別を併用することもできるし。メイリオが嫌いなマカーはメイリオいれなきゃいいいいよね。

何度やっても同じ

ただの日記

CSSのfont-familyに長いこと悩んで最近こうなった