CSSのfont-familyで游ゴシックや游明朝を指定する際の注意点

游ゴシックや游明朝はMacにもWindowsにも標準で搭載されている定番フォントです。

サイト制作者からすれば、とりあえずこれを指定しておけば綺麗に表示されるのでかなり嬉しいですね。

ところが、この游ゴシックや游明朝をCSSのfont-familyで指定するときは少し注意しなければなりません。指定方法が色々めんどくさいのです。

 

指定する際の注意点

試しに以下のような規則で指定してみます。

  • Windows:游ゴシックを使用、なければメイリオを使用
  • Mac:游ゴシックを使用、なければヒラギノ角ゴProを使用

 

この場合ですが、font-familyに以下のように指定してしまうとうまく動いてくれません。

body {
font-family: "游ゴシック",  "ヒラギノ角ゴ Pro W3", "メイリオ" , sans-serif;
}

 

この指定方法だとOSXで游ゴシックが表示されずにヒラギノ角ゴが表示されてしまいます。

そしてその原因は、WindowsとOSXでは游ゴシックの名前が違うからです。さらに言ってしまうとSafariで表示するための名前も違う。

フォント名はそれぞれ以下の通り。

  • Windows:游ゴシック
  • OSX:游ゴシック
  • Safari:”Yu Gothic”, YuGothic

Safariでも表示したいなら上記2パターンの英字名で記述しないと表示されません。

 

つまりまとめると、以下のように記述すれば游ゴシックが綺麗に表示されることになります。

body {
font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
}

太さ指定でさらに綺麗に表示

上記の書き方でとりあえず全てのOSで游ゴシックが表示されるようになったわけですが、Windowsの游ゴシックは太さを指定しないとかなり細く表示されてしまい、やや目に悪いです。

というわけで、游ゴシックに標準の太さを指定しておきましょう。

body {
font-family:"Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
}

まとめ

なんだかとても面倒なことになっていますが、とにかく游ゴシックはOSによって表示名が違うので、どのOSでも綺麗に表示できるように正しい名前をいくつか指定しておきましょうという感じです。

ちなみにWindowsは「游ゴシック/游明朝」、OSXは「游ゴシック体/游明朝体」で指定します。

英語表記ならWindows は「Yu Gothic/Yu Mincho」、OSXは「YuGothic/YuMincho」で指定します。

日本語、英語表記はどちらか好きな方を選んで使いましょう。個人的には英語表記の方が格好よくて好きです。

 

最後に游ゴシックを指定する際の雛形的なものを置いておきます。

body {
font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", (次以降の優先順位のフォント);
}