游ゴシックのfont-family指定方法！@font-faceは絶対NG！WindowsのChromeでかすれる問題徹底検証

游ゴシックは素晴らしい。まず前提としてこれは間違いのないことです。

ただ、面倒くさい問題があるんですよね。
そう、かねてより議論されている、「WindowsのChromeで見にくいんすけど」問題。

この問題についてちょっと調べればわかるのですが、@font-face で解決している人がかなり多いです。僕も以前までそうしていました。

「じゃあ結局、font-familyをどう書けばWindowsでも游ゴシックが綺麗に表示されるんだよ！」ということに対する個人的な結論が出ましたので、ここにメモしておきます。

Windowsでの游ゴシック問題をおさらい

まずは何が問題とされてるのか、おさらいしておきます。

これですね。

WindowsにはLight（細字）、Regular（標準）、Medium（中字）とBold（太字）があり、
font-weightが400,normalの時はRegularが該当する。

しかしこのRegularが、Chromeで掠れて見えるという問題です。Firefox, Edge, IEは大丈夫です。（IEはまた別の問題あり。）

ちなみに、MacではMediumとBoldしかなく、Regular自体が適用されることがないので問題はなし。

前提知識・今回の検証要件

Macでの游ゴシックの指定は、「"游ゴシック体"」もしくは「YuGothic」。

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

Windowsでは、「"游ゴシック"」または「"Yu Gothic"」。

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

日本語表記・アルファベット表記は、古いブラウザではどちらか一方にしか対応していないということがあるかもしれないとのことなので、両方記述するものとします。

また、以下を踏まえてご覧ください。

• Windows8.1はMedium自体が搭載されていないのでRegularで妥協します。
• IEは11までしか検証に含めておりません
• Androidは筆者が持っているAndroid7.0の実機でのみ確認
• light（細字）を指定する箇所はないものとします。

@font-faceで解決する方法について

冒頭でも述べましたが、この游ゴシックの問題については調べればものすごい数の情報が出て来ます。

そのほとんどが「@font-face」を使用して、游ゴシックのMediumを指定したオリジナルのフォント名を作ってしまうという方法です。

しかし、この方法はChrome62以降で効かなくなりました。

@font-faceに関する仕様はブラウザのバージョンアップによって変わっていくことが多く、すごく不安定なものです。

もし今後、また@font-faceで游ゴシックの問題が解決できるようになったとしても、使えるようになったり使えなくなったりするものを解決策としては使えないでしょう。

解決方法１: font-weight:500

最も簡単な解決方法です。

とりあえずWindowsとMacで游ゴシックが綺麗に表示されればOKって人向け。

font-weight:500を指定する

これだけ。

例

font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
font-weight: 500;

注意点

注意しなければならないのは、「游ゴシックに続けて指定するフォントは 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ではメイリオ、 Macではヒラギノ角ゴとなるように指定したのが先ほどの例。

sans-serif はMacとiPhoneではヒラギノ角ゴになるので、いちいち Hiragino Kaku Gothic ProNなどを指定する必要はありません。

Mac OS Catalinaかつ Chrome でフォントが効かないバグなどを考慮すると、書かないといけなくなりました。

了

sans-serifがどのOS・デバイスでどのフォントになるかをまとめてくれている以下の神サイトがあったので参照してみてください。

フォントカタログ5・ブラウザのデフォルトフォント

※ ただし、標準フォントを自身で設定している人のMacやiPhone端末では、「sans-serif」はその設定されたフォントで表示されることになります。
こういう人の端末で（游ゴシックがない場合に）絶対にヒラギノで表示させたいのであれば、「Hiragino Kaku Gothic ProN」なども記述しておくといいでしょう。
ただし、MacやiPhoneでは基本的に游ゴシックは入っているので游ゴシックがちゃんと表示されることがほとんどだと思いますし、デフォルトのヒラギノが嫌だから別のフォントを設定しているので、「sans-serif」だけで特に問題はないんじゃないかなと個人的には思っています。

↑これも、Catalina & Chromeのバグによってダメになりましたね...。

解決方法２: "游ゴシック Medium"

・font-weigh:500なんて気持ち悪い！不安だ！
・Windowsでもメイリオよりヒラギノ角ゴを優先したい！
・Macでは游ゴシックよりもヒラギノ角ゴを優先にするんだ！

という人たち向け。

つまり、font-weight: 400(normal)のまま、游ゴシックがMediumになるようにします。

結論から言いますと、「" 游ゴシック Medium"」や「" Yu Gothic Medium"」のように、直接Mediumの太さを指定する方法があります。

例

font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;

こうすることで、Macでは普通の游ゴシックが適用され、Windowsでは「 游ゴシック Medium」になります。

この指定が無効なブラウザやMediumが搭載されていない場合、普通の 游ゴシックとなり、游ゴシックがない場合にメイリオもしくはsans-serifと続きます。

この方法だと、游ゴシックの前やメイリオの前にヒラギノ角ゴを指定してもWindowsで太字になったりしないので大丈夫です。

注意点：古いFirefoxではこの方法の"游ゴシック Medium"のような、直接Mediumを指定する方法が無効なようですが、もともとFirefoxではRegularでも掠れたりせず綺麗な表示なので、問題ないとします。

問題点１: いつ、どのブラウザでこのMediumの直接指定が無効になるかわからない。

@font-faceのように、この指定方法がChromeで無効になれば終わりです。Chromeでこの指定が有効かどうか、アップデートされる度にチェックする必要があるでしょう。

問題点2: このまま太字にすると文字が滲む

これが結構な問題なのですが、 font-weightをboldにすると、直接Mediumを指定されたものを無理やり太くするので（具体的な処理内容は不明）、 太字が少し滲んだようになります。

各自のChromeで確認していただければわかるかと思いますが、"游ゴシック 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）をダイナミックサブセットで使用するといいかもしれないですね。

追記：IEでの別問題「テキスト下部にできる謎の余白」の対処法

冒頭で、Chromeでかすれる問題とは別に「IEはまた別の問題あり」と述べました。

これは何かというと、「テキストの下部に謎の余白ができる」という現象。游ゴシックを使われたことのある方はすでに経験済みかと思います。

これに対する対処法を紹介しておきます。

前提1：IE10以前は知らん

とりあえず、IE11での対応策を調べました。

IE10以下への細かな対応はただコストがかかるだけで、特に意味もないということを説得しましょう。

説明した上で、「IE10以下でも游ゴシック綺麗にしろー！」なんて無駄に労力のかかることを要求してくる完璧主義者野郎とはおさらばするべきかと。

前提2：使用するCSSハックについて

IEだけに適用させることのできるCSSハックとして、有名なものに-ms-high-contrastを用いたものがります。使用している人もたくさんいると思うのですが、実はこのハックは使うべきでない。

これダメ

@media all and (-ms-high-contrast: none) {
  .selector {
    /* IE10,IE11にのみ適用される */
  }
}

参考：-ms-high-contrast を CSS ハックに使ってはいけない、ただひとつの理由

今回使うCSSハック

色々調べたところ行き着いたのは、以下のCSSハックです。

IE11で有効なCSSハック

_:lang(x)::-ms-backdrop, .selector { /* IE11でのみ有効 */ } 

参考：css hacks 2018 ( IE11 / Edge / Chrome / Safari / Firefox )、IE11 のみ CSS を適用させる CSS ハック

対処法1：IEでだけ、使うフォントを別のものにする

一番楽な対処法。游ゴシック自体をIEでだけ避ければいいという、単純な案です。

そのもそも、このご時世にまだIEなんぞを使っている人たちは、フォントのことを気になんてしないので、メイリオでいいのです。笑（なんだかんだメイリオが一番親しみがあって読みやすいと、僕は思っています。）

例：IE11でフォントをメイリオにする

_:lang(x)::-ms-backdrop, body {
    font-family: "メイリオ", Meiryo, sans-serif;
} 

対処法2：気になるところだけその都度paddingなどで調節

文章の中では全てに同じ余白があるわけですから、文字のずれは特に気にならないと思います。「ちょっと他のブラウザより行間が広いな」くらい。

また、この無駄な余白の大きさはどうやら2px程らしいです。

なので、「気になる箇所のみ、2pxほどpadding-topなどで調節してしまう」という対処でもいいかと思います。

例：IE11でpadding-topを調節

_:lang(x)::-ms-backdrop, .selector {
    padding-top: 2px;
}