Windows だとブラウザの文字がギザギザになってしまう問題の解決策 - ゲーム作るくんのサイト
ゲーム作るくんのサイト
ゲーム作るくん
X

Windows だとブラウザの文字がギザギザになってしまう問題の解決策

普段 Mac で開発しているので、Windows で動作確認したときにフォントがギザギザになっていて驚いたことがあります。

このサイトでは、

font-family: 'M PLUS Rounded 1c', sans-serif;

というウェブフォントを使ってるんですが、これが Windows だとギザギザになっちゃうんですよね。非常に見にくい。

Windows 標準で入ってるフォントだとギザギザにならないので、それを使った方が良いのなかもな〜とも思ったんですが、せっかく気に入るフォントが見つかったのに変えたくないという思いが強く、なんとかならないものかとググりました。

前置きが長くなりましたが、結論を言うと、ギザギザを解消したい文字に対して、

transform: rotate(0.05deg);

という CSS の指定を入れれば OK です。微妙に回転させることによりアンチエイリアスがかかるっぽいです。じゃあ最初からかけてくれ、という感じではあるんですが。

注意点としては、画像も含んでいる div なんかにこれを指定してしまうと、画像も微妙に回転してしまうという問題があります。特にドット絵を使っているときに、ドットが崩れてしまうのでドット絵ゲームを作っている方は注意してください。