2011.05.05

PC : Chrome / ChromePlus で表示フォントを強制的にメイリオに

FireFox 4 が現状ではバグ多いので、Chrome に乗り換えました。起動も早いしサクサク動いて良いですな。ただし、Chrome だとブックマークをサイドバーに表示することが出来ないので、ブックマーク・サイドバーを備える派生ブラウザ ChromePlus の方を使っています。

私はメイリオにすっかり慣れてしまい、ウェブの表示もメイリオじゃないと落ち着かない人です。メイリオは Windows Vista 以降から採用されているフォントで、ClearType と呼ばれる、文字表示を滑らかにする技術に最適化されたフォントです。

FireFox では、Font Replacer というプラグインによって表示フォントを強制メイリオ化できます (※2011/5/5現在、FireFox 4 には未対応 いや対応済みだった) が、Chrome / ChromePlus の場合、Preference および Custom.css というファイルを編集することによって同様のことを実現できます。

このことは各所で紹介されていますが、満足できる結果を得るには色々と試行錯誤してしまいました。その辺を含めてやり方を紹介します。

設定ファイル (Preference, Custom.css) の場所

Custom.css は、User StyleSheets というサブフォルダ内にあります。

Chrome の場合

  • Win Vista/7: C:\Users\<ユーザー名>\AppData(隠しフォルダ)\Local\Google\Chrome\User Data\Default
  • Win XP: C:\Documents and Settings\<ユーザー名>\Local Settings(隠しフォルダ)\Application Data\Google\Chrome\User Data\Default

ChromePlus の場合

  • <ChromePlusのインストール先フォルダ>\ChromePlus\ChromePlusUserData\Default

※ChromePlus のインストール先フォルダを開くには、ChromePlus のアイコンを右クリックしてプロパティを開き、ショートカットタブで「ファイルの場所を開く」ボタンをクリック。

Preference ファイルの編集 (ChromePlus のみ)

まずは、Preference というファイルを編集し、デフォルトフォントを設定します。このファイルは、必ずブラウザを閉じた状態で編集して下さい。

何故このファイルの編集が必要かというと・・・

Chrome / ChromePlus は、内部的には4種類のデフォルトフォント指定を持っています:

  • "fixed_font_family": 固定幅デフォルトフォント
  • "sansserif_font_family": サンセリフ系 (ゴシック系) デフォルトフォント
  • "serif_font_family": セリフ系 (明朝系) デフォルトフォント
  • "standard_font_family": ウェブページでフォントが無指定の場合のデフォルトフォント

デフォルトフォントは、【設定ボタン (画面右上のスパナ) → オプション → 高度な設定 → ウェブ コンテンツ → フォントをカスタマイズ】 で変更できます。

2011/7/20現在、Chrome の場合はこの4種類全てのデフォルトフォントの設定が可能なように改善済みです。よって、設定ファイルの直接編集は必要ありません。

しかし、ChromePlus の場合は設定できるデフォルトフォントは標準フォントおよび固定幅フォントの2種類のみで、標準フォントは、serif_font_family の設定として反映されます。つまり、設定メニューからでは、4種類全てのデフォルトフォント指定を変更することができないのです。よって、設定ファイルの直接編集が必要になります。(ただしこれは将来的に改善される可能性があります。)

Preference というファイルをテキストエディタで開き、"webkit": { "webprefs": { } } の部分に、4種類のデフォルトフォント指定を記載しましょう。この部分が見つからない場合は、ブラウザを起動してフォント指定を行ない、それからブラウザを閉じ、その後に改めてファイルを開いて下さい。

   "webkit": {
      "webprefs": {
         "fixed_font_family": "MeiryoKe_Console",
         "sansserif_font_family": "MeiryoKe_PGothic",
         "serif_font_family": "IPA P\u660E\u671D",
         "standard_font_family": "MeiryoKe_PGothic"
      }
   }

serif_font_familyIPA P\u660E\u671D とは、IPA P明朝 のことです。ブラウザの設定画面から IPA P明朝 を選んでブラウザを閉じたら、このように設定されていました。

Custom.css ファイルの編集

Custom.css の保存の際の注意

このファイルは、UTF-8 BOM無し で保存する必要があります。多くのエディタではデフォルトでは Shift-JIS で保存されますので、保存時はエンコード指定をお忘れ無く。

このファイルは、ブラウザ起動中に編集しても問題は無く、保存すると、変更結果は即時反映されます。ブラウザ再起動の必要はありません。リロードすら不要の模様。

Custom.css の記述内容例

@charset "UTF-8";

/* 禁則処理の強制有効化 */

* {
word-break: normal;
word-wrap: break-word;
}

/* MSゴシック系のメイリオ化 */

@font-face {
font-family: "MS Pゴシック";
src: local("MeiryoKe_PGothic"), local("メイリオ"), local("MS Pゴシック");
}

@font-face {
font-family: "MS PGothic";
src: local("MeiryoKe_PGothic"), local("メイリオ"), local("MS Pゴシック");
}

@font-face {
font-family: "MS UI Gothic";
src: local("MeiryoKe_UIGothic"), local("Meiryo UI"), local("メイリオ"), local("MS UI Gothic");
}

@font-face {
font-family: "MS ゴシック";
src: local("MeiryoKe_Console"), local("MS ゴシック");
}

@font-face {
font-family: "MS Gothic";
src: local("MeiryoKe_Console"), local("MS ゴシック");
}

@font-face {
font-family: "MS UI Gothic";
src: local("MeiryoKe_UIGothic"), local("Meiryo UI"), local("メイリオ"), local("MS UI Gothic");
}

/* MS明朝系の ClearType 対応化 */

@font-face {
font-family: "MS P明朝";
src: local("IPA P明朝"), local("MS P明朝");
}

@font-face {
font-family: "MS PMincho";
src: local("IPA P明朝"), local("MS P明朝");
}

@font-face {
font-family: "MS 明朝";
src: local("IPA明朝"), local("MS 明朝");
}

@font-face {
font-family: "MS Mincho";
src: local("IPA明朝"), local("MS 明朝");
}

ポイントは、英字フォントを「unicode-range: U+0080-FFFF」を付加してメイリオに置き換えている点。これにより、英字については元々のフォントのままで、日本語のみメイリオに置き換えられます。

私のこのブログの場合、フォント指定は 「font-family: Tahoma, sans-serif」 を採用しています。

これは、FireFoxIEの場合、「英字フォントのみ Tahoma で、日本語はブラウザ側で設定されたデフォルトフォントを使う」 という挙動になります。

しかし、Chrome / ChromePlus の場合、標準フォントにメイリオを指定していても、何故かMS Pゴシックで表示されてしまいます。これを回避するため、英字フォントの置換をわざわざ上記のように設定する必要があります。 (Preference ファイルを編集して4種類のデフォルトフォントを指定することで回避可能)

MeiryoKe フォントについて

MeiryoKe フォントは、メイリオの (非合法の) 改造フォントで、表示幅を MS Pゴシック や MS US Gothic に揃えたバージョンと、固定幅バージョンが存在します。MSゴシック系に合わせて調整されているウェブページも表示が崩れることなく表示できますし、固定幅バージョンはエディタでの使用等に重宝します。

入手先 (ご利用は自己責任で!):

IPAフォントについて

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

なお、明朝系フォントの ClearType については、MS 明朝 からビットマップ部分を抜いて無理やり ClearType に対応させる方法もありますが、この方法では個人的には満足できるレベルの描画結果は得られませんでした。

Chrome プラグイン: 強制メイリオちゃん

より手軽に実現する方法としては、強制メイリオちゃんというプラグインを使う方法もある。インストールするだけで簡単に使えるのが利点ですが、これは現状では細かい設定ができず、個人的には満足出来るレベルの結果は得られないので私は使ってないです。色々設定できるようにする計画もあるようですので、今後に期待。

その他、FireFox 4 から Chrome / ChromePlus への移行の際のメモ

FireFox 4 から Chrome / ChromePlus へのブックマークのコピー

2011/5/5 現在、Chrome / ChromePlus では、FireFox 4 からブックマークを自動で読み込むことが出来ません。手動でコピーするには次の通り:

  1. FireFox 4 にて、FireFoxボタン (左上) → ブックマーク → 全てのブックマークを表示
  2. インポートとバックアップ -> HTML としてエクスポート
  3. Chrome / Chrome Plus にて、設定ボタン (右上のスパナ) → ブックマークマネージャ
  4. 管理 → ブックマークのインポート

ChromePlus のインストール先フォルダ

ChromePlus の場合、デフォルトのインストール先が妙なフォルダなので、c:\Program Files\ 内にインストールしたくなりますが、そうするとうまく動かないようです。Vista/7 への対応がいい加減な模様。

デフォルト以外のフォルダにインストールしたい場合、システムドライブ以外へインストールする必要があります。

Categories: PC

Category: PC

Trackbacks

Trackback URL:

コメント(2)

この設定でしばらく使ってみたけど、メイリオ化されないページが少なからずあるなぁ。Chromeのフォント設定回りの挙動はやはりよくわからん。

参考にさせて頂きました。