FirefoxにおけるWebページの表示から、ＭＳ Ｐゴシックとかを駆逐する。その方法

# 前提

以下、これから挙げるフォントを総称してMSフォントと呼ぶこととする。

* ＭＳ Ｐゴシック
* ＭＳ ゴシック
* ＭＳ Ｐ明朝
* ＭＳ 明朝
* MS UI Gothic

**こいつら皆、Webページの表示から駆逐されるべし。慈悲はない。**

高解像度化、Windowsにおけるフォントレンダリングの改善…これらの理由により、MSフォントというのは、現代に出現するとつらみが顕著に現れるのである。主に精神面でつらみが強いのである。しかも日本のエンプラ系Webサイトでは、未だMSフォントが表示フォントとして指定されている場合が多いから、つらみはますます強まるのである。

# 方法

以下の置き換えを行うことを前提とする。

* ＭＳ ＰゴシックをNoto Sansに置き換える
* ＭＳ ゴシックをNoto Monoに置き換える
* ＭＳ Ｐ明朝をNoto Serifに置き換える
* ＭＳ 明朝をNoto Monoに置き換える
* MS UI GothicをNoto Sansに置き換える

## まず拡張機能Stylusをインストール

* [Stylus - addons.mozilla.org](https://addons.mozilla.org/ja/firefox/addon/styl-us/)

ユーザースタイルシートを管理する拡張機能。これがインストールされていないことには話が始まらない。

## Stylusをインストールしたらすること

Stylusの「管理」ボタンを選択し、現れるウィンドウで「新スタイルの作成」ボタンを選択する。名前は自分の好きなもので構わない。適用先は「すべて」。「コード1」というテキストエリアに、以下のCSSコードを入力していく。最後は「保存」。

## CSSコード

```
@font-face {
    font-family: 'MS Pゴシック';
    font-weight: normal;
    src: local("Noto Sans");
}
@font-face {
    font-family: 'ＭＳ Ｐゴシック';
    font-weight: normal;
    src: local("Noto Sans");
}
@font-face {
    font-family: 'MS PGothic';
    font-weight: normal;
    src: local("Noto Sans");
}
@font-face {
    font-family: 'MS UI Gothic';
    font-weight: normal;
    src: local("Noto Sans");
}
@font-face {
    font-family: 'MS P明朝';
    font-weight: normal;
    src: local("Noto Serif");
}
@font-face {
    font-family: 'ＭＳ Ｐ明朝';
    font-weight: normal;
    src: local("Noto Serif");
}
@font-face {
    font-family: 'MS PMincho';
    font-weight: normal;
    src: local("Noto Serif");
}
@font-face {
    font-family: 'MS ゴシック';
    font-weight: normal;
    src: local("Noto Mono");
}
@font-face {
    font-family: 'ＭＳ ゴシック';
    font-weight: normal;
    src: local("Noto Mono");
}
@font-face {
    font-family: 'MS Gothic';
    font-weight: normal;
    src: local("Noto Mono");
}
@font-face {
    font-family: 'MS 明朝';
    font-weight: normal;
    src: local("Noto Mono");
}
@font-face {
    font-family: 'ＭＳ 明朝';
    font-weight: normal;
    src: local("Noto Mono");
}
@font-face {
    font-family: 'MS Mincho';
    font-weight: normal;
    src: local("Noto Mono");
}
@font-face {
    font-family: 'MS Pゴシック';
    font-weight: bold;
    src: local("Noto Sans");
}
@font-face {
    font-family: 'ＭＳ Ｐゴシック';
    font-weight: bold;
    src: local("Noto Sans");
}
@font-face {
    font-family: 'MS PGothic';
    font-weight: bold;
    src: local("Noto Sans");
}
@font-face {
    font-family: 'MS UI Gothic';
    font-weight: bold;
    src: local("Noto Sans");
}
@font-face {
    font-family: 'MS P明朝';
    font-weight: bold;
    src: local("Noto Serif");
}
@font-face {
    font-family: 'ＭＳ Ｐ明朝';
    font-weight: bold;
    src: local("Noto Serif");
}
@font-face {
    font-family: 'MS PMincho';
    font-weight: bold;
    src: local("Noto Serif");
}
@font-face {
    font-family: 'MS ゴシック';
    font-weight: bold;
    src: local("Noto Mono");
}
@font-face {
    font-family: 'ＭＳ ゴシック';
    font-weight: bold;
    src: local("Noto Mono");
}
@font-face {
    font-family: 'MS Gothic';
    font-weight: bold;
    src: local("Noto Mono");
}
@font-face {
    font-family: 'MS 明朝';
    font-weight: bold;
    src: local("Noto Mono");
}
@font-face {
    font-family: 'ＭＳ 明朝';
    font-weight: bold;
    src: local("Noto Mono");
}
@font-face {
    font-family: 'MS Mincho';
    font-weight: bold;
    src: local("Noto Mono");
}
```

ＭＳ Ｐゴシック、ＭＳ ゴシック、ＭＳ Ｐ明朝、ＭＳ 明朝の各フォント名は、**全角英字と半角スペースから成る表記が正式**である。しかしながら、全角英字ではなく半角英字からなる表記も許容されており、実際に広く使われている。また、日本語表記のゴシックおよび明朝をアルファベット表記のGothic及びMinchoに置き換えた表記も許容され、広く使われている。これら全てに対応すると、これほど長いCSSコードになるのである。

## 入力フォームのフォントを変える

しかし、これだけではまだ駆逐しきれないMSフォントが存在する。入力フォーム内で使われているMSフォントである。以下のCSSコードをスタイルシートに追加する。

```
button, input, select, textarea {
  font-family : "Noto Sans" !important;
  font-size   : 100%;
}
```

これにて一件落着。

# 関連リンク

* [さらばMS ゴシック／MS Pゴシック！　Windows版Google Chromeできれいなフォント表示を実現する](http://takepierrot.hatenablog.jp/entry/20120107/1325907236)
* [Google Chromeで汚いフォントを別のフォントに置き換える - ミルログ](https://www.mirucon.com/2016/03/02/stylist-font/)