HTML
CSS
HTML5
CSS3
フォント

游ゴシックをWindows版Chromeでキレイに表示する@font-faceの設定

More than 1 year has passed since last update.

【2017/11/2 追記】

Chrome62では下記の記述が効かなくなったようです。

(boldも効かなくなる)

Chromeの仕様がコロコロ変わるので、游ゴシックに対するfont-faceの記述はやめておいた方が良いかもしれません。


Windows版Chromeでは、「游ゴシック」が汚く表示(かすれて薄い)されてしまいます。

Chrome57まではこちらの方の指定方法で対処出来たのですが、58以降ではこの指定は動かなくなりました。

【追記】

Chrome58以降に対応したコードにアップデートされました。

細かく解説もされているので、参考になります。

「Yu Gothic Medium」だけを指定するとか、font-weight: 500;を指定する等の対処をしている方もいるようですが、納得がいかないので「@font-faceでYu Gothicの指定を調整する方法」で記述してみました。

(「Yu Gothic Medium」だけを当てると、boldのときに「Yu Gothic Bold」が当たらないし、font-weight: 500;を指定するのはあまりにも乱暴すぎる)


CSSのコード

@font-face{

font-family: "Yu Gothic";
src: local("Yu Gothic");
font-weight: 100;
}

@font-face{
font-family: "Yu Gothic";
src: local("Yu Gothic");
font-weight: 200;
}

@font-face{
font-family: "Yu Gothic";
src: local("Yu Gothic");
font-weight: 300;
}

@font-face{
font-family: "Yu Gothic";
src: local("Yu Gothic");
font-weight: 500;
}

@font-face{
font-family: "Yu Gothic";
src: local("Yu Gothic");
font-weight: bold;
}

*{
font-family: YuGothic, 'Yu Gothic', sans-serif;
}

この記述であれば、font-weight: normal;のときでも、Yu Gothic Midiumが当たり、Chromeで、かすれずに表示出来るようです。

LightとBoldもちゃんと表示されるようです。

※Windows 10と「游ゴシック游明朝フォントパック」をインストールしたWindows 7で表示確認を行いました。


改善版

@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;
}

コメントのご指摘を反映しました。

私が最初に投稿した記述では、Firefoxの方がChromeよりも濃い目に表示されます。

改善版では、Firefoxでもこの記述が効くようなので、差異が少なくなるようです。