「M PLUS Rounded 1c」「M PLUS 1p」がWindowsでジャギるのを修正する方法

TIPS 0 Takuya Kobayashi

Webフォント「M PLUS Rounded 1c」「M PLUS 1p」をWindowsで表示すると↓の画像のようにギザギザに表示されます。

だけど、大きめのフォントサイズだとアンチエイリアスが効く様子。

16px程度だとギザギザになる。

修正する方法1:CSSでジャギーを治す

CSSで「M PLUS」系Webフォントのジャギ―を治すには次のように指定します:

transform: skewX(0.03deg);

transformを使用して0.03°平行四辺形に変形させます。
見た目には変化ありませんが、これを指定した瞬間にアンチエイリアスが目覚めます。

「rotate(0.03deg)」も効きますが、「skewX(0.03deg)」の方が表示の変化が少ないです。

修正する方法2:「M PLUS 1」や「M PLUS2」に置き換える

ちらっとGoogleFontsを見てみたら、次の3つが追加されていました。

  • M PLUS
  • M PLUS 2
  • M PLUS 1 Code

フォントサイズを小さくしてプレビューしてみるとそれら二つはジャギってません。

「M PLUS Rounded 1c」や「M PLUS 1p」は卒業して、
「M PLUS」「M PLUS 2」「M PLUS 1 Code」等に置き換えましょう。

--
以上