游ゴシックがChrome62でやっぱりかすれるあなたへ

Windows(特にChrome)でfont-familyに游ゴシックを指定すると、文字が薄くかすれた表示になってしまいます。

游ゴシックではどうなってしまうのか

以下はChromeで游ゴシックをした例です。

読みにくくて仕方がありません。
ちょっと額にしわを寄せてしまう感じです。

この現象について解説されているサイトはこちら。

Windowsで游ゴシックが汚いのは、どう考えてもWebデザイナーが悪い?
Windowsで游ゴシックが汚いのは、結局誰が悪いのか?

要点を引用すると、

Windowsはちゃんとfont-weight: regular;で「標準」を表示しているにもかかわらず、それを「細字レベル」で表示してしまうChromeが悪いのではないか? 

ということのようです。

Macはweightの指定が無い場合には通常「Regular」というフォントで表示するところを「Medium」を使って表示しているために、かすれないで表示されます。

対策

これまで、以下のサイトの情報などを参考に、@font-faceを使ってこの問題を回避してきた方も多いのではないでしょうか。

font-familyにChromeでも読みやすい游ゴシックを指定する方法

ちょっと長いのですが、どのように書けばいいのかは、以下のように書かれています。

私もこれに似た指定をして、WindowsのChromeでもMediumを使って読みやすく表示されるようにしていました。

ついこの間までは。

Chrome 62での游ゴシック

2017年10月17日にChrome62がリリースされました。
このバージョンから、上記の指定ではMediumを使ってくれなくなり、元のかすれた表示に逆戻りしてしまったのです。

Chrome 62ではOpenType可変フォントに対応したこのと影響だと思います。多分。

そこでどうするか。

font-familyで游ゴシックを指定する際に、WindowsではMediumを使うように明示します。

Macでの游ゴシックの名前は游ゴシック体あるいはYuGothicですので、これらにはMediumを指定していません。
Macでは自動的にMediumが使われるからです。

一方、Windowsでの名前は游ゴシックあるいはYu Gothicなので、それらにMediumを付けています。

先程のかすれているものと比較してみます。

かすれている

かすれていない

ずいぶん読みやすくなりました。

※この記事は、この指定方法の検証も兼ねていて、引き続き検証をしていきますので、フォントの指定方法についても変更するかもしれません。

楽天市場

Amazon.co.jpアソシエイト

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)