WordPress CSS-RoundedM+1cがChromeでギザギザする件

2018年2月5日2018年2月6日

RoundedM+1cというwebfontがありまして。
現在このサイトで使っているフォントがそれです。

このLuxeritasというテーマでは、カスタマイズ欄で選択可能になっているのです。

が。

このwebfont、MACでみると綺麗に見えるらしいのですが、私の環境だとどーもガタガタのギザギザで見づらかったのです。

ずっとなんとかする方法ねーかなと探していたのですが、やっとどうにか及第点レベルにすることができたので、備忘録代わりにやり方載せておきます。

body {
-webkit-text-stroke: 0.1px #16160e;
transform: rotate(0.05deg);
}

です。

CSSは全くの素人ですが、各サイトの説明を読んだところ、

-webkit-text-stroke: 0.1px #16160e;


は、0.1pxの線をフォントに重ねて描くというもの。
勧めていたサイトでは0.2pxになってましたが、太すぎたので0.1pxにへらしました。
後ろの＃以降は重ねて書く線の色。真っ黒ではなく、若干、本当にすこーしですが、薄い黒になってます。サイトの文字色に合わせて変更すると良いと思います。

transform: rotate(0.05deg);

は、すこーしだけ回転させるCSSなんだそうです。
これはChrome用で、回転がちょっときつめ。他のブラウザでは0.00000001？とか。
私は自分が使ってる環境で綺麗に見えれば満足なので、他は設定してません（ぇ

この二つの合わせ技で、このサイトで見えるくらいには改善できました。

Retinaディスプレイにしたらこんなことしなくても全部綺麗に見えるという意見もありました。お金のある人はとっとといいディスプレイに変更するのもアリかもしれません。

参考にしたサイトはコチラ