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」等に置き換えましょう。