CSSでfont-familyの游ゴシックを指定する方法を紹介！

游ゴシックとは2008年に発売され、游明朝をベースに游明朝と共に使用することを想定して作成されました。

游ゴシック体の漢字の字面は少し小さいため、長文だと文字と文字の間に隙間が空きゆったりとした明るい印象を読者に与えます。

CSSでfont-familyの游ゴシックを指定する方法を紹介します。

font-familyを表示させるためには、作成者ではなく閲覧者のパソコンにフォントがインストールされている必要があります。

また、WindowsとMacでは游ゴシックの指定するフォント名が異なるため注意が必要です。

Windowsだとフォント名が『游ゴシック』、Macでは『游ゴシック体』と異なっているため2つ選択する必要があります。

 

Windows10では文字がかすれて見える原因を紹介いたします。

游ゴシックはMacとWindowsでは文字の太さが異なっておりMacではMediumなのですがWindows10では一段階小さいRegularが採用されています。

そのため、Windows10ではRegularが採用されてるためChromeで見る際に文字がかすれて見える問題が発生します。またガンマ補正もかかっており黒が薄く見える問題が発生します。

下記の写真のようにメイリオと游ゴシックでは游ゴシックのほうがかすれて見えます。
 

Windows10では文字がかすれて見える問題の対処法としては文字の太さをRegularからMediumに変更させる必要があります。

変更の仕方はfont-familyに"Yu Gothic Medium", "游ゴシック Medium"を追加するとWindows10では文字がかすれて見える問題を解決する事ができます。

下記の写真はMediumに変更した後で、かすれが無くなっていると思います。
 

いかがだったでしょうか？

Windowsの文字がかすれる問題が解決できたと思います。

また上記の記事で紹介している指定方法は下記のサンプルコードをコピー＆ペーストをしていただけるとすぐに使用する事ができます。