Windows の Firefox でフォントが汚かったので直した

Windows の Firefox と Chrome で、同じ游ゴシック体の見え方が極端に異なっていて、Firefox のフォントレンダリングがギザギザでメチャクチャ汚かったので、直し方を調べた。

Firefox はどうやら「MacType」などでフォント設定を変えても反映されないようで、about:config より以下を設定することでフォントレンダリングを滑らかにできた。

項目名 設定する値
gfx.content.azure.backends direct2d1.1,cairo (間にある「skia,」を抜く)
gfx.direct2d.disabled false (デフォルトまま)
gfx.direct2d.force-enabled true
gfx.font_rendering.cleartype.always_use_for_content true
gfx.font_rendering.cleartype_params.cleartype_level 100
gfx.font_rendering.cleartype_params.enhanced_contrast 200
gfx.font_rendering.cleartype_params.gamma 500 (お好みで)
gfx.font_rendering.cleartype_params.pixel_structure 1
gfx.font_rendering.cleartype_params.rendering_mode 5 (Natural Symmetric)
gfx.font_rendering.directwrite.enabled true
gfx.use_text_smoothing_setting true
layers.acceleration.disabled false (デフォルトまま)
layers.acceleration.force-enabled true

その設定項目がないモノもいくつかあったが、それらは新規に項目を作り、上述の値を設定してみた。どれがどんな風に効いてているのかイマイチハッキリしないが、とりあえず綺麗になった。

元ネタはそれぞれ以下の記事よりかき集めた。

DirectWriteを有効にし、ClearTypeの設定を微調整すると、かなり違和感がないところまでフォントがきれいになりました。

about:config は変更記録が残しづらいので user.js で設定すると良い。

フォントのレンダリングモードの変更 名前: gfx.font_rendering.cleartype_params.rendering_mode 5 (Natural Symmetric) 設定可能な値の中からビットマップフォントに対して無理矢理アンチエイリアスをかけることが出来るのは 5 だけである。

値が「direct2d1.1,skia,cairo」となっているので「direct2d1.1,cairo」に変更してOKを押す

gfx.font_rendering.cleartype_params.gamma という設定は私は500に設定しました。

2019-06-29 追記 : その後 Chrome も仕様変更があり、MacType が効かなくなってしまった。-webkit-text-stroke-width という CSS プロパティをブラウザ拡張機能などで付与すれば改善できるので、以下を参照。