こんばんは。
今回は影山飛雄も丸くなるレベルの備忘録です。
みなさん、今日も朝から元気に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年間何やってたんだ!?」