Windows を使いたくなくなる一番の理由となってもいい Chrome のフォントがクソ汚い問題。 ほんと Microsoft は真面目に取り組んだほうがいいよこれ。

2021年11月付近、Chrome のバージョンが 95 付近、Windows10 はもう 11 にアップグレードするぐらいのタイミング。

かなり苦労したのでメモっておく。無駄に複雑です。

これはそもそも使っているフォント自体がクソだということが問題にある。

Windows8.1 ぐらいの時期に｢游ゴシック｣というMacとの共通フォントが搭載されて、これで Windowsでも綺麗なフォントになると期待された。

しかし、フタをあけてみたら、Mac と Windows で搭載されいるフォントの太さが異なっており、設定により選択されるフォントがWindowsは Mac よりも細いものが選ばれる(Macはそもそも細いのが無い)、さらに Chrome のフォントレンダリングがその当時なのか今でもなのかわからないがヘコくて、さらに Windows で細く描画されてしまい、期待の高さもあいまって、Microsoft なにやってんのクソだよねという結論になってしまっていた。

その前に読みやすくて｢明瞭｣だよねという触れ込みの｢メイリオ｣というフォントもあったのだが、Mac に比べてとはいわないが、そもそもゴシック体なのに、縦横で妙に太さが違って、それに Chrome のカスカスレンダリングが重なって、やっぱり Microsoft ダメだよねという感じ。

フォントには font-hinting というパラメータがあるらしく、フォントを縮小表示した際に字がつぶれないように、縮小時にうまく変形できるようにそのメタ情報が乗せてある。Microsoft はそれを真面目に実装しているらしく、フォントを小さくするとそのヒントを使ってフォントの形を変えてしまっているらしい。それが線の不均一な歪みを生んで汚く見えるという説もある。そもそも今は、ピクセルを識別できないほどの高解像度当たり前の時代であり、ピクセルが足りないから変形して誤魔化すなんてことやる必要が無いのである。Mac や Linux はこのへんはヒントがあっても無視してレンダリングするらしい。

この Windows フォントレンダリング不遇に対して MacType というような Windows のフォントレンダリング全体を改築して全部綺麗にしてやろうという豪快ツールがある。それで万事OKな気もするが、これは Windows 全体の挙動に介入するのでそもそも不安定、さらに今度は Chrome がそこにそもそもフォントに介入できないような仕組みで動いており MacType が反映されない。結局 Microsoft だめだよね。

だったら、介入できるブラウザを使えばいいだろということでそういう Chromium ブラウザも存在するが、現状 Chrome はものスゴイ速度でバージョンアップしていき、セキュリティや機能のことを考えると、そういう何時メンテされるかバージョンアップするかわからないようなブラウザは使い物にならない。結局 Microsoft ダメだよね。

という感じで全て Microsoft のせいなのではあるが、なんというか、使っているフォントがダメだというのが結論なのである。昔はみんなが同じフォントでレンダリングされていることに意味はあった、2ch の AA は｢MS Pゴシック｣で読まれることを前提にしていて、紙概念の抜けないデザイナは｢游ゴシック｣を使ってみんなに統一されたデザインで見て貰いたかった。

しかし、今ではデバイスや環境が増えすぎて、そもそも全部統一なんか無理になってしまい、さらにデザイナの考えなんか知らんがな、俺たちの好きな大きさ好きなフォントで読ませろという時代。

つまり解決策は綺麗にレンダリングできるフォントにすりゃいいということ。

Google が太っ腹に高品質なフォントを配りまくってくれているので、それを利用すればいい。 その中でも日本語フォントではほぼ Web で標準となりつつあるのが Noto Sans JP なのでこれを使う。

Noto Sans Japanese - Google Fonts https://fonts.google.com/noto/specimen/Noto+Sans+JP

ここからダウンロードできる

ここで Chrome で使われている既存の汚い代表選手フォントたちを Noto Sans JP に置き換えたいのだが、これらのフォントを Chrome で使うためにはやや特殊なインストール方法をする必要がある。

まず 設定 → 個人用設定 → フォント に進み Noto Sans JP を選択しその｢フォントファイル｣という項目でその存在が｢C:\USERS\…｣ 配下にあるかどうかを確認する。

前に Noto Sans JP をインストールしたことがあるなら、普通はフォントファイルが USERS の配下のどこかになっているはず。そうでなければ ｢C:\WINDOWS\FONTS\…｣ 配下にあるはずである。

そして USERS 配下の Noto Sans JP が存在したのなら、アンインストールボタンを押して全部アンインストールする。 ここらへんがややバグっていて状況によってはアンインストールに失敗して設定のウィンドウが落ちる可能性もある。 そういう場合は Windows を何度か再起動してからだと成功したりする。

なぜこんなことをやらないといけないかというと、Chrome が認識するのは ｢C:\WINDOWS\FONTS\…｣ のほうのフォントで、｢C:\USERS\…｣ ではないからである。逆に ｢C:\USERS\…｣ にフォントがあったらダメなので、除去する必要があるということである

アンインストールが完了したら念のため Windows を再起動しておいたほうがいい。

｢C:\USERS\…｣ から Noto Sans JP が除去できたので、｢C:\WINDOWS\FONTS\…｣ に Noto Sans JP にインストールする。 ここでも注意が必要で、設定 → 個人用設定 → フォント からインストールしたり、フォントファイルをダブルクリックしてフォントビュワーからインストールボタンを押したり、エクスプローラーから ｢C:\WINDOWS\FONTS\…｣ へドラッグしたりすると、｢C:\USERS\…｣ にインストールされてしまうのである。

ここではエクスプローラーで開いているダウンロードした Noto Sans JP の oft ファイルを右クリックして、｢すべてのユーザーに対してインストール｣を選ぶ必要がある。 これでインストールすると ｢C:\WINDOWS\FONTS\…｣ にフォントがインストールされる。

ここで、otf とか ttf のファイルを右クリックしても ｢すべてのユーザーに対してインストール｣ という選択肢がコンテキストメニューに出てこない場合がある。 これは、この otf とか ttf とかいうファイルが ｢windowsフォントビューアー｣ というアプリに関連付けされていないとでないのである。

なのででない場合はファイルのプロパティから関連付けを変更する。

デフォルトでは ｢windowsフォントビューアー｣ に関連付けされているはずなのだが、irfanview というメジャーな画像ビューアーのどこかのバージョンのインストーラーにバグがあって、開けもしない ttf ファイルを irfanview に関連付けてしまうという動作をするらしい。irfanview をインストールしている人は要注意である。

これでフォントがインストールできた。さっそくこいつを Chrome で指定してみる

Chrome の 設定 → デザイン → フォントのカスタマイズ で｢標準フォント｣と｢Sans-Serif フォント｣を Noto Sans JP にする。これで特に無指定のサイトは Noto Sans JP になってくれる。これだけでもずいぶん綺麗になるはず。

しかし、大半のサイトがフォント無指定なわけでなく、上記のようなクソフォントを指定しているので実際の効果は薄い

Font Rendering Enhancer という Chrome 拡張があるのでこいつをインストールして、設定のスライダーを全開にする。 これでさらに綺麗になった。

サイトは CSS でフォント指定している。そこにフォントが書かれているのでその設定を上書きしてやればよい。

こういうサイトの作者のCSSに対してユーザー側勝手にスタイルを書き換えることができたりする。 それをやるための拡張が何個かあるが有名なのが ｢stylus｣ という拡張になるので、これをインストールしてスタイルを上書きする準備をする。

では今回 MS Pゴシック での設定がされている所に Noto Sans JP を使おうということにする。

CSS で指定されるフォントというのは、font-face という設定に基づいている、なのでここで、MS Pゴシックという名前で Noto Sans JP を使うぞと書けばよい。

このようになる。

@font-face {
    font-family: "MS PGothic";
    src: local("Noto Sans JP");
}
@font-face {
    font-family: "ＭＳ Ｐゴシック";
    src: local("Noto Sans JP");
}

MS Pゴシックは書き方によって2通り書けるので、両方潰してやる。これでサイト側で font-family で MS Pゴシック指定している部分が、 Noto Sans JP に入れ替わる。 MS Pゴシックは相当汚いフォントなのでこれで大きく見た目が向上する。

同様に明瞭ではないメイリオに対しても同じような設定をすればよい。

ここでやや細く感じてしまうならこのように対応するフォントをやや太めへ変更するのもアリだろう。このへんは調整して好みのパラメタを見つけるといい。

@font-face {
    font-family: "MS PGothic";
    font-weight: normal;
    src: local("Noto Sans JP Medium");
}
@font-face {
    font-family: "ＭＳ Ｐゴシック";
    font-weight: normal;
    src: local("Noto Sans JP Medium");
}

ここまできても、なんだかやや Mac よりも文字は細いし、エッジ部分ガリガリ感があるような気がする。 そこで、フォントに擬似的なアンチエイリアス処理を加える。

↑と同じく stylus の設定でこのようにする。

* {
    text-shadow: 0 0 1px, 0 0 2px !important;
}

これにより、文字の輪郭がやや太くそして滑らかにボケる。ちょっと嫌らしいぐらいに見た目がねっとりした画面に焼き込まれたようなフォント表示になる。

これぐらいしてやっと、読めるようになったかなという感じになる。

↑はいやらし過ぎるので、このように枠線を足してやるというやり方もある。こちらはややすっきりする。

* {
    -webkit-text-stroke: 1px !important;
}

これが

こうなります

設定前は、ちょっと許されないと思う。