游ゴシックは素晴らしい。まず前提としてこれは間違いのないことです。
ただ、面倒くせぇ。問題が多すぎるのです。
かねてより議論されている「WindowsのChromで見にくいんすけど」問題。
調べればわかるのですが、@font-faceで解決している人がかなり多いです。僕もそうしていました。
しかし、この@font-face、もう効かなくなってますよ！
結局、font-familyをどう記述すればWindowsでも綺麗に表示されるんだよ！という結論が個人的に出ましたので、ここにメモしておきます。
問題点をおさらい
まずは何が問題とされてるのか、おさらいしておきます。
Windowsの Chrom で、font-weightが400(normal)の時、文字が細すぎる。
これですね。
WindowsにはLight（細字）、Regular（標準）、Medium（中字）とBold（太字）があり、
font-weightが400,normalの時はRegularが該当する。
しかしこのRegularが、Chromで掠れて見えるという問題です。Firefox, Edge, IEは大丈夫です。（IEはまた別の問題あり。）
ちなみに、MacではMediumとBoldしかなく、Regular自体が適用されることがないので問題はなし。
前提知識・今回の検証要件
Macでの游ゴシックの指定は、「"游ゴシック体"」もしくは「YuGothic」。
font-family: "游ゴシック体", YuGothic;Windowsでは、「"游ゴシック"」または「"Yu Gothic"」。
font-family: "游ゴシック", "Yu Gothic";日本語表記・アルファベット表記は、古いブラウザではどちらか一方にしか対応していないということがあるかもしれないとのことなので、両方記述するものとします。
また、以下を踏まえてご覧ください。
- Windows8.1はMedium自体が搭載されていないのでRefularで妥協します。
- IEは11までしか検証に含めておりません
- Androidは筆者が持っているAndroid7.0の実機でのみ確認
- light（細字）を指定する箇所はないものとします。
@font-faceで解決する方法について
冒頭でも述べましたが、この游ゴシックの問題については調べればものすごい数の情報が出て来ます。
そのほとんどが「@font-face」を使用して、游ゴシックのMediumを指定したオリジナルのフォント名を作ってしまうという方法です。
しかし、この方法はChrom62以降で効かなくなりました。
@font-faceに関する仕様はブラウザのバージョンアップによって変わっていくことが多く、すごく不安定なものです。
もし今後、また@font-faceで游ゴシックの問題が解決できるようになったとしても、使えるようになったり使えなくなったりするものを解決策としては使えないでしょう。
解決方法１: font-weight:500
最も簡単な解決方法です。
とりあえずWindowsとMac、iPhoneあたりで游ゴシックが綺麗に表示されればOKって人向け。
font-weight:500を指定する
これだけ。
例
font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
font-weight: 500;※ 続くフォントが何故メイリオとsans-serifなのかは後述します。
注意点
注意しなければならないのは、「游ゴシックに続けて指定するフォントは font-weight:500で太字にならないものに限定される」ということです。
例えば メイリオや MS Pゴシックはfont-familyが500でも太さは変わらないのでOKです。また、MacとiPhonenにおける ヒラギノ角ゴ(Hiragino Kaku Gothic ProN , Hiragino Kaku Gothic Pro)もOK.
ただし、 Windowsでのヒラギノ角ゴはfont-weightが500で太字になってしまうので注意。
なので、
游ゴシック最優先で、游ゴシックがなければ Windowsではメイリオ(さらになければMS Pゴシック)、 Macではヒラギノ角ゴとなるように指定したのが先ほどの例。
sans-serif はMacとiPhoneではヒラギノ角ゴになるので、いちいち Hiragino Kaku Gothic ProNなどを指定する必要はありません。（なんでみんな指定しているのか不思議...）
sans-serifがどのOS・デバイスでどのフォントになるかをまとめてくれている以下の神サイトがあったので参照してみてください。
解決方法２: "游ゴシック Medium"
・font-weigh:500なんて気持ち悪い！不安だ！
・Windowでもメイリオよりヒラギノ角ゴを優先したい！
・Macでは游ゴシックよりもヒラギノ角ゴを優先にするんだ！
という人たち向け。
つまり、font-weight: 400(normal)のまま、游ゴシックがMediumになるようにします。
結論から言いますと、「" 游ゴシック Medium"」や「" Yu Gothic Medium"」のように、直接Mediumの太さを指定する方法があります。
例
font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;こうすることで、Macでは普通の游ゴシックが適用され、Windowでは「 游ゴシック Medium」になります。
この指定が無効なブラウザやMediumが搭載されていない場合、普通の 游ゴシックとなり、游ゴシックがない場合にメイリオもしくはsans-serifと続きます。
この方法だと、游ゴシックの前やメイリオの前にヒラギノ角ゴを指定してもWindowで太字になったりしないので大丈夫です。
注意点：古いFirefoxではこの方法の"游ゴシック Medium"のような、直接Mediumを指定する方法が無効なようですが、もともとFirefoxではRegularでも掠れたりせず綺麗な表示なので、問題ないとします。
問題点１: いつ、どのブラウザでこのMediumの直接指定が無効になるかわからない。
@font-faceのように、この指定方法がChromで無効になれば終わりです。Chromでこの指定が有効かどうか、アップデートされる度にチェックする必要があるでしょう。
問題点2: このまま太字にすると文字が滲む
これが結構な問題なのですが、 font-weightをboldにすると、直接Mediumを指定されたものを無理やり太くするので（具体的な処理内容は不明）、 太字が少し滲んだようになります。
各自のChromで確認していただければわかるかと思いますが、"游ゴシック Medium"を太字にするのと、普通の"游ゴシック"を太字にするのとでは明らかに文字が変化しています。
この太字問題をカバーするには、太字には改めてfont-familyを当て直し、通常の"游ゴシック"にする必要があります。
太字に関するCSS
b, strong, .bold{
font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", ... ,sans-serif;
}
まとめ
いかがだったでしょうか。
@font-faceが効かなくなっていることに気がついて今回改めて游ゴシックについて検証してみました。
そこまで厳格に気にしなくて良いのなら、font-weight:500にして普通に游ゴシックを指定するのが楽かなと思います。
もしくは、Webフォントでしょうか。確実にどのデバイスでも同じフォントになるのですごく楽です。
GoogleフォントのNoto Sansは重すぎるのでサブセット化して使用するか、Adobe CCを契約している人であれば源ノ角ゴシック（Source Han Sans）をダイナミックサブセットで使用するといいかもしれないですね。
