Windows 7でWebサイトを見ていると、MS ゴシックなどのアンチエイリアスが通常サイズでかからないフォントを強制するデザインのサイトがあります*1。
アンチエイリアスがかからず文字がぎざぎざに表示されると見苦しく感じるので、ブラウザの設定で使用するフォントをメイリオなどに変更しますが、それだけではだめで、「Webページが指定したフォントを優先する」の設定を解除する必要があります。
これでしばらくはよかったのですが、GitHubを使い始めたときに、GitHubのサイトで使われるアイコンのWebフォントが化ける問題にあたってしまいました。化けた画面表示例は次です。
「Webページが指定したフォントを優先する」の設定を有効にするとWebフォントが化けずに表示されるようになります。
しかし、これではせっかくMS ゴシックなどのギザギザ表示を解消したのに、またMS ゴシック強制サイトを開くと見苦しい表示に戻ってしまいます。
どっちに転んでもうれしくないので何か手はないかと探してみました。多くはWebページが指定したフォントを優先するを有効にしておしまいになっていましたが、中には同じ問題を扱ったブログがありました。
twitter Webの新メニュー表示は「フォント」なので、オプションで無効化されてしまうことがある | デジモノに埋もれる日々
このブログでは、解決方法としてfirefoxのアドオン「Stylish」を使ってCSSでフォントの置き換えをしています。
そこで、Stylishアドオンを入れてフォント置き換えをやってみました。
Stylishで新しいスタイルを定義します。
[S]アイコンをクリック（または[ツール]メニュー > [アドオン] > [ユーザースタイル])し、[新しいスタイルを書く]で定義画面が表れます。
名前に、「MS Pゴシック置き換え」などと入れて、[挿入]ドロップダウンリストで[HTML名前空間を標準とする]を選択、最初の行に次の記述が入ります。
@namespace url(http://www.w3.org/1999/xhtml);
次にフォントの置き換え設定を記述していきます。
@font-face {
font-family: "MS Pゴシック";
src: local("メイリオ");
}
@font-face {
font-family: "MS PGothic";
src: local("メイリオ");
}
@font-face {
font-family: "MS UI Gothic";
src: local("Meiryo UI");
}MSゴシック、MS明朝を強制するサイトがあれば、ここに設定を追記します。
これで、ビットマップ系フォントの対策、Webフォントの対策が両立するようになりました。
StylishはChrome用にもあるとのことなので、Chromeでもビットマップ系フォント対策ができると思われます。
Styllisの設定方法、フォント置き換え記述方法は、以下のサイトを参考にしました。
http://homepage1.nifty.com/akshiba/mail_web/fx_css.html
http://digital.veefour.com/2013/e247/
Firefox 3.6以降でＭＳ Ｐゴシックを無効にする - Hail2u
*1:なんとなくIT系に多い気が・・・
