knowledge base

マークアップ/フロントエンドエンジニアのWEB制作における備忘録です。平日はWEB屋、休日は社会人劇団の主宰・劇作家をしています。

Windows環境でWebフォントが崩れる

ブラウザを問わずWindowsでのみ崩れる

Webフォントサービスを利用していた際、Windows環境にてブラウザを問わずフォントが崩れるという現象がありました。

Windows環境での表示

f:id:ShinImae:20170730224920p:plain

▼本来の表示

f:id:ShinImae:20170730225030p:plain

遠目にはわかりにくいのですが、太字の部分においてWindowsの環境では若干文字のベースラインがずれてしまいガタガタとした表示になっています。

Windowsではフォントによっては滑らかに表示できないという癖があるようです。

そんな時は(本来CSSアニメーションを滑らかにするハックですが)以下のスタイルを指定することで解決します。

transform: rotate(0.1deg)

若干ボケてしまったり、フォントが太って見える場合もありますが、少なくともガタガタとした表示だけは回避することができます。

必要があればユーザーエージェントをもとにWindows環境にのみ上記のスタイルを設定するとベターです。