Google ChromeでＭＳＰゴシックをArial+メイリオに置換する

最近のブラウザではWebフォントの利用を可能にする@font-faceをサポートしており、使われているサイトもよく見かけるようになった。@font-faceはWebフォントの利用に限らず、ローカルのフォントの再定義にも使えるので、ユーザースタイルシートで利用すればＭＳＰゴシックをメイリオに置換することが出来る(Chromeでも)。これに留まらず@font-faceデスクリプターのunicode-rangeプロパティを利用すれば、英数字はArialで日本語部分はメイリオで置換するなどというわがままなことが出来る。

unicode-rangeプロパティはグリフのコードを範囲指定することによってsrcプロパティで指定されているフォントのどの部分を利用するかを決定するもの。つまりArialから英数字(PDF: Basic Latinと呼ばれる範囲)を取ってきてＭＳＰゴシックを置換する場合はGoogle Chromeのユーザースタイルシートで以下のようにする。

@font-face {
  font-family: "ＭＳ Ｐゴシック";
  src: local("Arial");
  unicode-range: U+0000-007F;
}

ユーザースタイルシートはユーザー・データ・ディレクトリのUser StyleSheetsディレクトリ(フォルダ)にあるCustom.cssというファイルで、そのファイルにコピペするだけでＭＳＰゴシックの英数字部分がArialに置き換わる(ブラウザの再起動も不要)。更に残りの部分をメイリオに置換するなら同じfont-family名で定義を追加する。

@font-face {
  font-family: "ＭＳ Ｐゴシック";
  src: local("メイリオ"), local("ＭＳ Ｐゴシック");
  unicode-range: U+0080-FFFF;
}

今度はunicode-rangeで先程のU+007Fまでを外して範囲指定する。これでＭＳＰゴシックが英数字部分がArial、それ以外がメイリオに置換されるようになる。@font-faceの順序を逆にすれば、メイリオの方のunicode-rangeは指定する必要がない(多分)。

他に実用性のある組み合わせがあまり思いつかないが、強いて挙げるならMS UI GothicをSegoe UIとMeiryo UIを混ぜたもので置換するとかだろうか。

@font-face {
  font-family: "MS UI Gothic";
  src: local("Segoe UI");
  unicode-range: U+0000-007F;
}

@font-face {
  font-family: "MS UI Gothic";
  src: local("Meiryo UI"), local("MS UI Gothic");
  unicode-range: U+0080-FFFF;
}

等幅フォントの場合はフォントによってグリフの幅が違うため、縦が揃わなくなることが多く、混ぜないほうが無難だと思う。また、等幅フォント同士組み合わせなくてはならないというルールなどもないので、Consolas+メイリオなども普通に作れるが、あんまり意味ない。

Firefox 4やOpera 11、Internet Explorer 9ではまだunicode-rangeのサポートはされていないようなので、このテクニックは使えない。

追記

@hail2u_ http://bit.ly/dUX02H unicode-range: U+0080-10FFFF; にしないとBMP外の文字が置換されないのではないでしょうか。

と@nanto_viに指摘されたので、ちょっと調べてみました。BMP外ってのはSMPとかなんとかいう奴です。まったく詳しくないので、そこらへんのことは華麗にスルーする。びっとまっぷじゃないよ！

元々U+FFFFまでにしたのはSafariのCSSリファレンスで「U+xxxxという形で指定する」と書かれていたので、それに従っただけだった。SMPのグリフを持つフォントを持ってない(ような気がする)ので、検証が面倒そう……と感じたことも理由のひとつ。CSS3 Fontsの仕様ではU+10FFFFがデフォルトとなっているので、そっちの方が良いかなとは少し思っていた。

指摘を受けてNon BMP Areaの数値文字参照を並べて豆腐にならないかチェックしてみた。検証に使ったフォントはEverson Monoで事前にそれらのグリフが正確に表示されることは確認した。結果、Google ChromeではどうもBMPを超えた領域の文字は、フォントがあっても描画できないようだ(Firefox 4では描画されたのでHTMLがおかしい訳ではないはず)。つまり今のところunicode-rangeプロパティでU+FFFFより後ろを指定しても、Google Chromeでは意味が無いということになる。

このエントリーはCSS3 Fontsの一般的な話ではなく、Google Chromeユーザースタイルシートに限定した話なので、とりあえずエントリーは修正せずに追記だけすることにした。

気になる人は、

unicode-range: U+0000-10FFFF;

に書き換えてください。