【CSS】日本語Webフォントでシャギー(ギザギザ)が入ってしまう時の対処法

日本語Webフォントを実際に使用してみると、シャギー(ギザギザ)が入ってしまう事はありませんか？

日本語Webフォントにシャギー(ギザギザ)が入る原因は、ブラウザの種類によったり特定のサイズ以下で使用する事により、文字にシャギー(ギザギザ)が入ってしまうようです。

そこで今回はCSSを使ってシャギー(ギザギザ)が入ったWEBフォントにアンチエイアスをかけたような、なめらかに見せる方法をご紹介していきます。

関連記事：WEBフォントの使い方とシステムフォントとの違いをご紹介

WEBフォントのシャギー(ギザギザ)をなめらかに見せる方法

WEBフォントのシャギー(ギザギザ)をなめらかに見せるためには、以下のcssのtransformでWEBフォントのシャギー(ギザギザ)をなくします。

以下のCSSをWEBフォントに適応します。
rotateの値は使用するフォントによって適宜変更を行ってみて下さい。

wf{
  transform: rotate(0.003deg);
}

文字をほんの少し傾ける事で文字にアンチエイアスのかかったようななめらかな表示にしてくれます。

上の画像は、実際にテキストにtransformを使用した場合と使用していない場合の画像です。
下のテキストの方が少し文字がギザギザしているのが確認できます。

まとめ

WEBフォントに入ったシャギー(ギザギザ)について、cssでアンチエイリアスをかけたようななめらからな表示にする方法をご紹介いたしましたが、いかがだったでしょうか？

WEBフォントを使用する機会は多く、WEBサイトのSEOを考慮するとテキストは極力テキストで表現をしてあげると望ましいでしょう。

全てのWEBフォントにシャギー(ギザギザ)が入る事はありませんが、もし使用したWEBフォントでシャギー(ギザギザ)が入った場合には、是非ご参考にしてもらえれば幸いです。