Corredor

ウェブ、プログラミングの勉強メモ。

Windows で游ゴシックが細く見えないようにする CSS

最近の Windows と Mac の両方に標準搭載されている「游ゴシック」フォントだが、Windows にのみ細字の「Light」が搭載されているため、CSS でフォント指定をしても、Windows で閲覧したときだけ細いフォントで見えてしまう。

細いフォントも悪くはないが、個人的には少し見づらいので、もう少しだけ太く表示できるようにしてみる。

CSS

今日デザインを変更したぼくのサイト Neo's World では、以下のような CSS 指定にした。

body {
  font-family:"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
  font-weight:500;
}

フォントの太さを色々検証したが、font-weight:500; とすると、游ゴシックが一段落太くなり、少し見やすくなった。

なお、游ゴシックがインストールされていない場合は「ヒラギノ角ゴ」「メイリオ」が選ばれる指定になっているが、font-weight:500; と指定していた場合のヒラギノとメイリオの表示は font-weight:normal; と変わらなかったので、特に問題ないだろう。

Windows7 で3フォントを用意し、Firefox、Chrome、IE11 で表示確認した他、iPhone6 Plus の Safari でもチェックしたが、この環境ではこの CSS 指定で特に問題なし。

Mac 環境でチェックできてないので、もし表示に不具合があったら教えてください。

2016-06-13 追記:コメントいただいているので Mac OS X El Capitan の Firefox、Chrome、Safari でもチェックした。Windows 同様、特に太く見えてしまうとかということはなし。上記のとおり font-weight:500; で問題ないかと。