Chromium系ブラウザの文字がぼやける問題をたぶん解決した

だいぶ前にこんな記事を書いた↓

Chromium系ブラウザを使うとなぜかサイトの文字がぼやけるのだ。かなりマシにはなったがそれでもFirefoxと比べるとぼやけていた。

それで、いろいろ試している内にある現象に気づいた。Chrome用拡張機能に、Font Rendering Enhancerというのがあってこれを使うとぼやけが軽減されるのだ。どうもフォントに影を付けて太く見せているらしい。

そして、この拡張機能を無効にしてぼやけている時の文字の周りをよく見てみると、薄い色で影がついているところがあった。

…、もしかしてフォントに影がついているからぼやけているのか？

結果、この予想通りだった。レンダリングがどうとかいう問題じゃなかったらしい。

Stylusという拡張機能でWebページのデザインをカスタムすることが出来る。これを使ってフォントの影を決めるCSS，text-shadowプロパティを無効にしてみた。（無効とはすべての値を0pxに設定）

するとどうだろう。文字がハッキリするではないか。
Vivaldiで検証したところほぼFirefoxと同じ表示になった。多少文字が太く見えるがぼやけてはいない。

Edgeでも同じ設定をしてみたが効果があった。ただこちらはEdge:flagsでEnhance text contrastを無効にした方がよりきれいになる。

結論としてはこう。
1）Stylusを使い、以下のようなコードを書いて適用。

* {
font-family: "Meiryo" !important;
text-shadow: 0px 0px 0px #00000040 !important;
}

font-familyも指定しているのは、VivaldiやEdgeのフォント設定だけだとフォント指定が適用されないサイトがあるからだ。別にこれがなくてもぼやけたりはしないはず。font-familyのフォント指定，Meiryoの部分は好きなフォントを指定するといい。
font-familyは指定しない方がきれいに見えるようだ。ブラウザの設定で好きなフォントを指定すればOKだ。

text-shadowの#00000040は本来は影の色を決める値。この場合だと前の000000が黒を表している。40は透明度だ。00で透明、80で半透明という具合。これは好みで設定するといいだろう。なおこれらの値は16進数で指定する。

影を付けていないのだから透明度は関係ないと思うだろうが、これをするのとしないのとでは明らかに違う。不透明に近づくほど文字が太くなる。

また、適用対象を*ではなくbodyとかにした方がいいようだが、それでは適用されないサイトもあったのでこうしている。今のところ不具合はないようだ。

2）Edgeの場合は、Edge:flagsでEnhance text contrastを無効にする。

これだけ。
Vivaldiの起動オプションとか高DPI設定の変更とかWindowsのテキスト調整などもいらない。

なぜこういう結果になったのかは、「ブラウザ側で勝手に文字に影を付ける処理をしている」もしくは「そういう処理をするWebサイトがある」というのが原因だからだと思う。

たぶんこれで解決できると思うが、これは私の環境だとうまくいっただけで直らない場合もあるだろう。またモニターを拡大表示して使っている場合はまた別の問題となるようだ。

こういう手法もあるんだな程度に参考にして欲しい。
ともあれこれでChromium系ブラウザも使えそうだ。Firefoxでは正常動作しないサイトやサービスもちらほらと遭遇するのでそのうち乗り換えも検討したい。では今回はこの辺で。