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

CSSでfont-familyの游ゴシックを指定する方法を紹介いたします。游ゴシックはWindowsとMacでは游ゴシックの指定するフォント名が異なるため注意が必要です。またWindowsでは文字がかすれる問題があるため文字を太くする必要があります。

コンテンツ [表示]

  1. 1游ゴシックとは?
  2. 2CSSでfont-familyの游ゴシックを指定する方法
  3. 3Windows10では文字がかすれて見える?
  4. 4Windows10では文字がかすれて見える問題の対処法
  5. 5まとめ

游ゴシックとは?

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

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

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

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

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

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

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

 

body{
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
}

Windows10では文字がかすれて見える?

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

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

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

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

游ゴシックかすれる

Windows10では文字がかすれて見える問題の対処法

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

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

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

body{
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
}
游ゴシックかすれない

まとめ

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

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

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

body{
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
}

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを7月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを7月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次

shu
ライター

shu

主にHTML & CSS、Bootstrap の記事を執筆します。皆さんがわかりやすく、記憶に残る情報を発信していきます。