2010.04.26

PC : 美しい日本語! FireFoxでメイリオ+ClearTypeを最大限に活用

私はアンチエイリアス処理された滑らかなフォントが大好きな人間だ。人によっては逆に大嫌いという人も居るようだが、まあこれは純粋に好みの問題。ということで、FireFox の規定日本語フォントにはメイリオ系を指定している。メイリオWindows Vistaから採用されているフォントで、ClearTypeというアンチエイリアス・メソッドに最適化されているのが特徴であり、とても良好な描画結果が得られる。Windows XPには標準搭載はされていないが、Windows Update経由で入手できる。

しかし、規定のフォントは、フォントを明示的に指定してあるウェッブページでは用いられない。メイリオを明示的に指定してあるウェッブページも少なくないが、MSゴシック系を指定してあるウェッブページは多い。MSゴシック系を指定してあるページでは、メイリオ系で表示されないので、ずっと不満に思っていた。

FireFox には、ウェッブページ側でのフォント指定を無視して、ブラウザ側の規定フォントを強制的に用いる設定も用意されている。しかし、これではウェッブページ側での英字フォントの指定まで無視されてしまうので味気ない表示結果になってしまうし、表示の崩れにも繋がってしまう。

こういった不満点を全て解消する方法が見つかったので、紹介したいと思う。つまり、以下の点を満たすということだ:

  1. 日本語フォントはウェッブページ側の指定を無視し、メイリオ系で表示する
  2. フォント幅の違いによる表示崩れをなるべく抑える
  3. 英字フォントは、ウェッブページ側の指定に従う

まずは結果を見て頂きたい。MSゴシック系が指定されている Yahoo! Japan の表示例 (クリックして原寸表示):

20100426_ff_font_yahoo1.jpg

▲標準的な表示結果。MSゴシック系が用いられている

20100426_ff_font_yahoo2.jpg

▲メイリオ系での描画結果。
美しくアンチエイリアスされているが、描画崩れはほぼ無い

Chrome / ChromePlus の場合

Chrome / Chrome Plus でも同様のことが出来ます。

Font Replacer (FireFox プラグイン、FireFox 4 対応済み)

これを実現するために、Font ReplacerというFireFoxプラグインを使っている:

  • Font Replacer (※2011/6/16 消滅している...残念! 復活を願う)

このアドオンを使うと、「フォントAが指定されている場合は、フォントBで描画させる」というように、個々のフォントにそれぞれ個別の代替フォントを指定することができる。使い方は簡単で、Font Replacer の設定画面を開き、左側に置き換えたいフォントを、右側に対応する代替フォントを記述して【Save】をクリックすれば完了。私の設定はこうなっている:

20100426_ff_font_f-rep.jpg

コピペ用:

MS UI Gothic
MS PGothic
MS Pゴシック
MS Gothic
MS ゴシック
MS P明朝
MS PMincho
MS 明朝
MS Mincho
Meiryo UI
MeiryoKe_PGothic
MeiryoKe_PGothic
MeiryoKe_Console
MeiryoKe_Console
IPA P明朝
IPA P明朝
IPA明朝
IPA明朝

Meiryo UI / MeiryoKe

この通り、「メイリオ」ではなく、「Meiryo UI」やら「MeiryoKe_~」やらを指定している。「メイリオ」と書いて来たのはこういうわけだ。

「Meiryo UI」は、メイリオの表示幅をやや狭く調整したフォントだ。「MS UI Gothic」に近いが、同じではなく、「MS UI Gothic」に比べるとやや表示幅が広い。これはマイクロソフトから公式に提供されているフォントであり、Windows 7 には標準搭載されているし、Windows Vista であれば、Windows Update を通じて入手することができる。なお、Windows XP に提供されているのは「メイリオ」のみであり、残念ながら「Meiryo UI」は提供されていないようだ。

「MeiryoKe_~」は、「メイリオ」の表示幅を調整した派生フォントだ:

  • MeiryoKe_PGothic : 「MS Pゴシック」と同等の表示幅に調整されている。
  • MeiryoKe_UIGothic : 「MS UI Gothic」と同等の表示幅に調整されている。
  • MeiryoKe_Console : 固定幅バージョン。

描画崩れを避けてメイリオを使えるので大変重宝している。しかし、これはユーザーによる無断改変フォントであり、マイクロソフト公式のものではない。改変フォントを直接配布してしまうと確実に著作権法違反なので、配布元ではフォント改変ツールの配布という形で提供されている。しかしこれでもグレーなので、自己責任において利用して欲しい。

なお、メイリオ系フォントは ClearType が有効になっていないと無残な表示結果になる。必ず、OSの設定で ClearType を有効にしてから利用して欲しい。

IPAフォントについて

IPAフォントはフリーのゴシック/明朝フォントで、ClearType による描画結果がなかなか良好です。上記の設定例では、ゴシック系フォントにはメイリオを用いていますが、明朝系フォントの描画については IPA明朝 / IPA P明朝 を用いるようにしている。

ClearType対応ではないフォントを、強制的にClearType対応にする

ちなみに、MSゴシック系などのClearType対応ではないフォントを、強制的にClearType対応にする方法があるようだ:

この方法は私は試してないのだが、参考までに紹介しておいた。

CSSでの font-family の指定の流儀

参考までに、私のブログにおけるCSSでのフォント指定はこうなっている:

font-family: Tahoma, sans-serif;

この設定では、多くのブラウザにおいて、英字フォントのみ Tahoma を使用し、日本語フォントはブラウザの規定のフォントを使用する、という描画結果になる。英字だけでもブログ執筆者側の好みのデザインのフォントを用いてデザイン上のアクセントとするが、しかし日本語フォントについては読み手の好みのもので表示してもらう、という設定だ。

でも結局・・・

Mac+Osakaが一番・・・なのか!? (汗 なんも設定しなくてもデフォで綺麗な結果得られますしねぇ。

Categories: PC

Category: PC

Trackbacks

Trackback URL:

コメント(2)

現在、FireFox 3.6.13 + Font Replacer 0.100911.8 の組み合わせでは Font Replacer が動かないです。アップデート待ち。

直った。原因は FireFox 本体ではなく、Java Console だった模様。
Java Console が複数バージョンインストールされてたので、
最新バージョン以外を全て削除したら復旧。

http://www.infinity-dimensions.com/blog/archives/firefox36-javaconsole-delete.html