2016-02-12

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

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

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

CSS

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

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

2019-06-04 : 当時はよく分からず書いていたが、「游ゴシック体」「YuGothic」(スペースナシ) と書くのは Mac 用。Windows 向けに反映させる場合は「游ゴシック」「Yu Gothic」(スペースアリ) と書く。

フォントの太さを色々検証したが、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; で問題ないかと。

2018-05-23 追記 : 以下の記事で紹介したが、font-weight: 500 を指定することには副作用がある場合があるので、@font-face で指定する方が良い。詳細は以下の記事をドウゾ。

2018年以降はコレで決まり！Web サイトで指定するゴシック体・明朝体・等幅の font-family 設定

2019-06-04 追記 : さらなる游ゴシック調査の結果は以下をドウゾ。