日本語Webフォント「M PLUS Rounded 1c」ギザギザして汚くない?→CSSで解決!

Web関連
Web関連

こんばんは。

今回は影山飛雄も丸くなるレベルの備忘録です。

 

みなさん、今日も朝から元気にGoogle Fonts使っていますね。

 

日本語フォントの中でも丸みを帯びていて柔らかい印象のある「M PLUS Rounded 1c」。

これがギザギザ?ジャギジャギ?になって汚く表示されることがあります。

 

 

 

高解像度モニターでサイト表示している場合や、フォントサイズが小さい(16px以下?)の時になるようです。

(これ「ジャギー」って言うらしいです)

見出しなどフォントサイズが大きい場合はそのままで良いですが、文字が小さい場合はとっても困ります。

 

この問題、CSSで解決しましょう!

h1 {
  transform: rotate(0.04deg);
}

 

要は文字を少しだけ傾けると、ジャギーが直るってことです。

理屈はよく分かりません。

 

傾ける角度は人によって「0.03deg」だったり「0.05deg」だったりするようなので、ここは色々試してみて下さい。

 

 

注意点

CSSを効かせるのは、文字に対してだけにして下さい。

bodyやsectionなどに効かせると楽!と思いきや、サイト全体が傾いたりします。

 

 

代替フォント使った方が楽

ここまで解説しましたが、ぶっちゃけ代わりのフォント「M PLUS 1」もしくは「M PLUS 2」を使うほうが正直楽です。

私はいつも「M PLUS 1」を使うようにしています。

 

なので今回の解説はほぼ無駄ってことですわ笑

それらを持っていながら、お前は3年間何やってたんだ!?

タイトルとURLをコピーしました