【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でもこの記述が効くようなので、差異が少なくなるようです。