追記:
書き上げてから気づいたのですが、ほとんど同じ内容の記事が投稿されていました → ＭＳ Ｐゴシックを撲滅する！ - Qiita
お蔵入りにするのは忍びないのと、その記事とは違うタグをつけるので新たな層にリーチできることを期待して、投稿させていただきます…
私は常々こう思っています。「どうしていまだに、CSSのフォント指定にはMSゴシック(やMS明朝)を指定するのか」と。
游ゴシックやユニバーサルデザイン(UD)フォントなど、読みやすいフォントは他に用意されているのに、CSSのfont-familyはあいも変わらず古式ゆかしい書体を指定し続けています。
MSフォントの、印刷物上ならまだしも、画面に表示した際の汚さたるや、それが視界に入った時点でマウスは戻るボタンに向かい始めるほどです。
世の全てのコーダーにこいつらの指定をやめろと行って回りたいのですが、きっと各現場には何かこう、有無を言わせぬ奥深い理由があるのでしょう、きっと。そうであれば仕方ありません、こちらは個人でできるような自衛策を講じることにしましょう。
もしかしたら私と同じように、Windowsデフォルトフォントを嫌う人々は少なくないのではないかと考え、筆を執る次第です。
ユーザースタイルシート
ここでの目標は、「ウェブ閲覧の際にMSゴシック(やMS明朝)と出会わなくなる」ことです。私のブラウザはデフォルトフォントを源ノ角ゴシックに設定していますから、これらのフォントを目にすることがあるとすればそれは、ウェブサイト側のCSSで「わざわざ」font-family: "ＭＳ ゴシック"とでも指定されているということです。
それでは、そういう指定を消したり上書きするようなスクリプトを書けばいいのでしょうか？
いいえ、実はこれ、CSSだけで実現できるんです。といっても全てのウェブサーバーに勝手にCSSファイルを仕込むわけにはいきませんから、ユーザーCSS(ユーザースタイルシート)という手を使います。
ユーザースタイルシートを閲覧時に自動で適用してくれるブラウザ拡張機能がいくつかありますので、ここでは「Stylus」を使います(同名のCSSプリプロセッサとは別物です)。
同様の拡張機能が利用できるブラウザであれば、ブラウザの種類は問いません。少なくともFirefoxとChromeでは動作確認しています。
ダウンロードはこちら。
Chrome 拡張機能
Firefox アドオン
使用例
私自身は以下のユーザーCSSを使っています。
上記の拡張機能をインストールして、「新スタイルを作成」から以下をそのまま貼り付ければ、これで準備完了です。二度とMS～フォントに出会わなくなります！
ただし源ノ角ゴシック(CSS内の表記では"Source Han Sans JP")をインストールしていない場合は、それぞれお好きなフォント名に書き換えてください。
/*──MS Pゴシック──*/
@font-face {font-family: "MS PGothic"; src: local("Source Han Sans JP"); font-weight: normal;}
@font-face {font-family: "MS PGothic"; src: local("Source Han Sans JP Bold"); font-weight: bold;}
@font-face {font-family: "ＭＳ Ｐゴシック"; src: local("Source Han Sans JP"); font-weight: normal;}
@font-face {font-family: "ＭＳ Ｐゴシック"; src: local("Source Han Sans JP Bold"); font-weight: bold;}
/*──MS ゴシック──*/
@font-face {font-family: "MS Gothic"; src: local("Source Han Sans JP"); font-weight: normal;}
@font-face {font-family: "MS Gothic"; src: local("Source Han Sans JP Bold"); font-weight: bold;}
@font-face {font-family: "ＭＳ ゴシック"; src: local("Source Han Sans JP"); font-weight: normal;}
@font-face {font-family: "ＭＳ ゴシック"; src: local("Source Han Sans JP Bold"); font-weight: bold;}
/*──ＭＳ Ｐ明朝──*/
@font-face {font-family: "MS PMincho"; src: local("Source Han Serif"), local("Noto Serif JP"); font-weight: normal;}
@font-face {font-family: "MS PMincho"; src: local("Source Han Serif Bold"), local("Noto Serif JP"); font-weight: bold;}
@font-face {font-family: "ＭＳ Ｐ明朝"; src: local("Source Han Serif"), local("Noto Serif JP"); font-weight: normal;}
@font-face {font-family: "ＭＳ Ｐ明朝"; src: local("Source Han Serif Bold"), local("Noto Serif JP"); font-weight: bold;}
/*──ＭＳ 明朝──*/
@font-face {font-family: "MS Mincho"; src: local("Source Han Serif"), local("Noto Serif JP"); font-weight: normal;}
@font-face {font-family: "MS Mincho"; src: local("Source Han Serif Bold"), local("Noto Serif JP"); font-weight: bold;}
@font-face {font-family: "ＭＳ 明朝"; src: local("Source Han Serif"), local("Noto Serif JP"); font-weight: normal;}
@font-face {font-family: "ＭＳ 明朝"; src: local("Source Han Serif Bold"), local("Noto Serif JP"); font-weight: bold;}
/*──MS UI Gothic──*/
@font-face {font-family: "MS UI Gothic"; src: local("Source Han Sans JP"); font-weight: normal;}
@font-face {font-family: "MS UI Gothic"; src: local("Source Han Sans JP Bold"); font-weight: bold;}
/*──メイリオ──*/
@font-face {font-family: "Meiryo"; src: local("Source Han Sans JP"); font-weight: normal;}
@font-face {font-family: "Meiryo"; src: local("Source Han Sans JP Bold"); font-weight: bold;}
@font-face {font-family: "Meiryo UI"; src: local("Source Han Sans JP"); font-weight: normal;}
@font-face {font-family: "Meiryo UI"; src: local("Source Han Sans JP Bold"); font-weight: bold;}
@font-face {font-family: "メイリオ"; src: local("Source Han Sans JP"); font-weight: normal;}
@font-face {font-family: "メイリオ"; src: local("Source Han Sans JP Bold"); font-weight: bold;}
少し解説
@font-face {font-family: "ＭＳ Ｐゴシック"; src: local("Source Han Sans JP"); font-weight: normal;}
- たとえば上のコードは、
font-familyに指定されたフォントを、srcに指定されたローカルにあるフォントで表示するというものです。srcの部分にurl(～～.woff)などとすればローカルにないウェブフォントも指定できます。 - 同じ
font-familyで2行あるのは、通常のものと太字とを書き分けているからです。太字(font-weight: bold)の行はなくても構いません。 - メイリオも混じっていますが、これは汚いからではなくて、単に統一性を求めただけです。