2009-11-22

Firefox 3.6以降でＭＳ Ｐゴシックを無効にする

CSSの@font-faceではユーザーがインストールしていないフォントをウェブ上に用意してやりそれをダウンロードさせてページ上で利用することを主眼としているが、ローカルのフォントを置換、つまりＭＳ Ｐゴシックをメイリオに置換するなどということもできる。Firefoxでは3.6から可能になった(Beta版でももちろん可能)。ユーザー・スタイルシートでの利用が中心になると思う。

ＭＳ Ｐゴシックをメイリオに置換する場合は以下のようにuserContent.cssに記述する(userChrome.cssではない)。

@font-face {
  font-family: "ＭＳ Ｐゴシック";
  src: local("メイリオ"), local("Meiryo"), local("ＭＳ Ｐゴシック");
}

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

日本語で書く必要があるので、userContent.cssの先頭に@charset "UTF-8";と書かれていることとuserContent.cssの文字コードがUTF-8であることは確認しておく。それぞれのsrcプロパティの最後にlocal("ＭＳ Ｐゴシック")も書いてあるのは一応念のため。これであらゆるウェブページでＭＳ Ｐゴシックがメイリオで表示されるようになる。

srcで指定するフォントは複数のフォントを混ぜ合わせることもできる。例えば、

@font-face {
  font-family: "ＭＳ Ｐゴシック";
  src: local("Calibri"), local("メイリオ"), local("Meiryo"), local("ＭＳ Ｐゴシック");
}

とするとＭＳ Ｐゴシックが英字部分はCalibriで日本語部分はメイリオで表示されるようになる(ちょっと正確ではないけど)。

ＭＳ ゴシックには良い代替フォントはあまりないが、やるならUmePlusやUmePlus CLとかが良いと思う。

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

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

また、Windows 7(やメイリオのアップデータをインストールしたWindows Vista)では、

@font-face {
  font-family: "MS UI Gothic";
  src: local("Meiryo UI"), local("MS UI Gothic");
}

こんな風に書いておくとMS UI GothicがMeiryo UIに置換される。ClearType大好きっ子にオススメ。

ローカル・フォントの置換の欠点は置換するフォントをまったく利用することができなくなることとそれらのフォントを前提にデザインされたウェブページでデザインやレイアウト崩れてしまうかもしれないこと。特にＭＳ Ｐゴシックをメイリオに置換する場合は、フォントの横幅がかなり広くなってしまうのでよくレイアウトが崩れることになると思う。

デメリットは少なからずあるが、解像度の向上した現在ではClearType (やアンチエイリアス)の効いた大きめのフォントでウェブページを閲覧する方が快適と感じる人が多いと思うので、設定して損はないと思う。

@font-face {
  font-family: "MS UI Gothic";
  src: local("Meiryo"), local("MS UI Gothic");
}