Windows（特にChrome）でfont-familyに游ゴシックを指定すると、文字が薄くかすれた表示になってしまいます。
游ゴシックではどうなってしまうのか
以下はChromeで游ゴシックをした例です。
読みにくくて仕方がありません。
ちょっと額にしわを寄せてしまう感じです。
この現象について解説されているサイトはこちら。
Windowsで游ゴシックが汚いのは、どう考えてもWebデザイナーが悪い？
Windowsで游ゴシックが汚いのは、結局誰が悪いのか？
要点を引用すると、
Windowsはちゃんとfont-weight: regular;で「標準」を表示しているにもかかわらず、それを「細字レベル」で表示してしまうChromeが悪いのではないか？
ということのようです。
Macはweightの指定が無い場合には通常「Regular」というフォントで表示するところを「Medium」を使って表示しているために、かすれないで表示されます。
対策
これまで、以下のサイトの情報などを参考に、@font-faceを使ってこの問題を回避してきた方も多いのではないでしょうか。
font-familyにChromeでも読みやすい游ゴシックを指定する方法
ちょっと長いのですが、どのように書けばいいのかは、以下のように書かれています。
@font-face {
font-family: "Custom Yu Gothic";
src: local("Yu Gothic");
font-weight: 300;
}
@font-face {
font-family: "Custom Yu Gothic";
src: local("Yu Gothic");
font-weight: 500;
}
@font-face {
font-family: "Custom Yu Gothic";
src: local("Yu Gothic");
font-weight: bold;
}
selector {
font-family: YuGothic, "Custom Yu Gothic", "Yu Gothic", sans-serif;
}
私もこれに似た指定をして、WindowsのChromeでもMediumを使って読みやすく表示されるようにしていました。
ついこの間までは。
Chrome 62での游ゴシック
2017年10月17日にChrome62がリリースされました。
このバージョンから、上記の指定ではMediumを使ってくれなくなり、元のかすれた表示に逆戻りしてしまったのです。
Chrome 62ではOpenType可変フォントに対応したこのと影響だと思います。多分。
そこでどうするか。
font-familyで游ゴシックを指定する際に、WindowsではMediumを使うように明示します。
font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic;
Macでの游ゴシックの名前は游ゴシック体あるいはYuGothicですので、これらにはMediumを指定していません。
Macでは自動的にMediumが使われるからです。
一方、Windowsでの名前は游ゴシックあるいはYu Gothicなので、それらにMediumを付けています。
先程のかすれているものと比較してみます。
かすれている
かすれていない
ずいぶん読みやすくなりました。
※この記事は、この指定方法の検証も兼ねていて、引き続き検証をしていきますので、フォントの指定方法についても変更するかもしれません。