【自分用メモ】CSSで游ゴシックを指定する場合の注意点
..
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の配列などでまとめておくのがいいと思います。