【自分用メモ】CSSで游ゴシックを指定する場合の注意点

..

参考記事:https://wemo.tech/1155

WindowsとMacでは游ゴシックの名前が違う

Windowsには游ゴシック、Macには游ゴシック体という名前で搭載されているので、そのどちらも書く必要があります。

font-family: "游ゴシック", "游ゴシック体";

なお、ブラウザが古いと英字表記で指定しないと適用されなかったりするらしいので、Windows用にはスペースあり、Mac用にはスペースなしで併せて書いておきます。

font-family: "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic";

筆者のMac、およびSafari上でCSSを書き換えてみたところ、游ゴシック体 YuGothicのどちらでも游ゴシック体に変わりました。

Windows用にはMediumを指定する

Windowsの場合、Macよりも游ゴシック体の太さの種類が多いらしいです。
Macであれば通常はMediumが適用されるが、Windowsの場合はMediumより一段階細いRegularが標準になっているため、ただ指定しただけだと細くてみづらいとのこと。

なのでCSSの書き方としては、
Mac向けWindows向け(Medium)Windows向け(通常)游ゴシックがない場合の代替フォント
の順番で指定するのが良さそうです。

font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", 何かしらのゴシック体;

Mediumにした場合の強調

<b><strong>タグで囲われた部分については「Mediumをさらに太くする」という処理のされ方になるので、見栄えが悪くなることがあるらしいです(Windowsを持ってないのでよく知らないけど)。

なので、それら強調タグに対しては「Mediumなしで再度游ゴシックを指定する」のがいいとのこと。

/* bodyに対してはMediumを指定 */
body {
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", 何かしらのゴシック体;
}

/* 強調タグに対しては普通の太さを指定 */
b, strong {
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", 何かしらのゴシック体;
}

なかなか冗長なので、Sassの配列などでまとめておくのがいいと思います。