前提
以下、これから挙げるフォントを総称してMSフォントと呼ぶこととする。
- ＭＳ Ｐゴシック
- ＭＳ ゴシック
- ＭＳ Ｐ明朝
- ＭＳ 明朝
- MS UI Gothic
こいつら皆、Webページの表示から駆逐されるべし。慈悲はない。
高解像度化、Windowsにおけるフォントレンダリングの改善…これらの理由により、MSフォントというのは、現代に出現するとつらみが顕著に現れるのである。主に精神面でつらみが強いのである。しかも日本のエンプラ系Webサイトでは、未だMSフォントが表示フォントとして指定されている場合が多いから、つらみはますます強まるのである。
方法
以下の置き換えを行うことを前提とする。
- ＭＳ ＰゴシックをNoto Sansに置き換える
- ＭＳ ゴシックをNoto Monoに置き換える
- ＭＳ Ｐ明朝をNoto Serifに置き換える
- ＭＳ 明朝をNoto Monoに置き換える
- MS UI GothicをNoto Sansに置き換える
まず拡張機能Stylusをインストール
ユーザースタイルシートを管理する拡張機能。これがインストールされていないことには話が始まらない。
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%;
}
これにて一件落着。