21
28

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2017-06-07

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

21
28
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
21
28

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?