WordPress CSS-RoundedM+1cがChromeでギザギザする件
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ディスプレイにしたらこんなことしなくても全部綺麗に見えるという意見もありました。お金のある人はとっとといいディスプレイに変更するのもアリかもしれません。
参考にしたサイトはコチラ
ディスカッション
コメント一覧
また目が悪くなったのか、この方法だと字がぼやけて見づらいため現在は何もしなくても普通に見えるメイリオにしてあります。
しかしたかがフォントでMACとの格差を感じるとは……。
windowsも早くこの問題に対処してくれればいいのに。
ガチで治った。ありがとう