こんにちは。デザイナーのみなさん、游ゴシックは好きですか？
僕は大好きで毎日舐め回しているわけですが、舐めるほどに游ゴシックの面倒くささに舌が痺れます。
痺れる要因はやはりWindows版Chromeで文字が掠れてしまう問題。
自分は@font-faceで無理やり解決していたのですが、この方法はChrome62以降から効かなくなってしまいました。
結局、游ゴシックにしたいときはfont-familyをどう書くのがベストなのか、個人的に着地点が見つかったのでご紹介したいと思います。
目次
結論
これだけです。今まで@font-face含め20行近く記述していたのがアホらしくなりますが…。
以下からはなぜこの指定なのかを説明したいと思います。これらの点を踏まえてご覧いただければなと思います。
- Windows8.1のウェイトにはMedium自体ないのでRegularを使用
- IE11未満は気にしない
- Androidは自分が持っているAndroid 8.1でのみ表示確認
解決したい問題
今回解決したい問題はこちらです。
Windows版Chromeでfont-weight: 400(Normal)の時、文字が細くなり掠れてしまう
WindowsにはLight、Regular、Medium、Boldがあり、font-weightが400(Normal)の時はRegularが該当します。
しかしこのRegularが、Chromeでのみ掠れて見えるという問題です（IEではまた別の問題があるのですが。。）
ちなみにMacにはMediumとBoldしかなく、Regular自体が適用されることがないので問題はありません。
OSごとの游ゴシック指定方法
Macでの游ゴシックの指定
font-family: "游ゴシック体", YuGothic;
Windowsでの游ゴシックの指定
font-family: "游ゴシック", "Yu Gothic";
ブラウザのバージョンによっては、日本語表記・アルファベット表記どちらかにしか対応していないことがあるので、両方記述します。
font-weight:500について
游ゴシックのMediumを適用させるためにfont-weight:500を指定していますが、ここで一つ必ず守りたい注意点があります。
デザインを崩さないためにも「游ゴシックに続けて指定するフォントは font-weight:500で太字にならないものに限定される」ということです。
例えば、メイリオやMS Pゴシック、Macで使われるヒラギノ角ゴ（Hiragino Kaku Gothic ProN , Hiragino Kaku Gothic Pro）は太さが変わらないので大丈夫です。
ただし、 Windowsのヒラギノ角ゴはfont-weightが500で太字になってしまうので適用させてはいけません。
これらから、
游ゴシックを最優先にし、游ゴシックがなければ Windowsではメイリオ、 Macではヒラギノ角ゴとなるように指定したのが上記のfont-familyとなります。
「sans-serif」を指定しておけばMacとiPhoneではヒラギノ角ゴが当てられるので指定する必要はありません。
わざわざ「Hiragino Kaku Gothic ProN〜」とか指定しているサイトも多いですが、無駄な記述は極力減らしたいところですね。
sans-serifがどのOSでどのフォントになるかをまとめている神サイトがあったのでご参照ください（ちと古いですが…）。
IEでの「テキスト下部にできる謎の余白」問題
記事中で、Chromeで掠れる問題以外にもIEにはまた別の問題があると述べましたが、それは「テキストの下部に謎の余白ができる」問題。
これに対する対処法も紹介しておきます。
IE10以前は存在しないものとします
まず前提としてIE10以下へのクソめんどうな対応は考えないことにします。
CSSハックでなんとかする
結局CSSハックかよー！
と思われた方、ほんとすみません。
表示を整えたいだけならば、なんだかんだでブラウザごとに個別に対応してしまうのが2018年9月現在での最適解だと考えています。
結論からいうと、IEにだけ別のフォントを適用させます。
_:lang(x)::-ms-backdrop, body {
font-family: "メイリオ", Meiryo, sans-serif;
}
フォント変えちゃっていいのかと思われるかも知れませんが、このご時世に古のIEなんぞを使っている古代人はフォントのことなんて気にしていないので大丈夫だと思います。
今回はせめてもの情けで、一番親しみがあるであろうメイリオを当ててあげます。
ここで注意点があるのですが、CSSハックでググるとよく出てくるのが「-ms-high-contrast」。
使用している人もたくさんいると思うのですが、このハックは非推薦なので気をつけてください。
CSSハック自体推薦されるものではありませんが…。
参考：-ms-high-contrast を CSS ハックに使ってはいけない、ただひとつの理由
まとめ
游ゴシックを指定したい場合のfont-familyのベストプラクティスを考えて見ましたが、如何だったでしょうか。
この前のChromeアップデートの記事を書いている最中に@font-faceが効かなくなっていることに気がついたので、改めて游ゴシックについて検証してみました。
だいぶ前から効かなくなっていたんですね…。
游ゴシック以外にも、全てのデバイス／ブラウザで同じ表示にしたい場合は源ノ角ゴシック（Source Han Sans）をサブセット化して使用する方法があります。
webフォントは確実にどのデバイスでも同じフォントになるのですごく楽ですね。
游ゴシックを舐め回したいがfont-familyの記述に困っている方、ぜひお試しください。
