【解説】游ゴシックのMac・Windowsの違い【font-family】

パソ君

・游ゴシックのMac・Windowsの違いは何がある？

こんな疑問にお答えします。

游ゴシックのフォントは、WindowsとMacで表示に違いがあるのが特徴。

Windowsの場合、見にくくなり読みづらくなってしまう。。

ジト

MacとWindowsでは見え方に差異があるんだよね

そのため使用する場合は、この違いを知っておいたほうが良いですね。

ということで、この記事では「游ゴシックのMac・Windowsの違い」について解説していきます！

【解説】游ゴシックのMac・Windowsの違い

游ゴシックのMac・Windowsでは下記が違います。

順に見ていきましょう。

英語名称

まず英語名称が違います。

Windowsには半角スペースが入っています。
見た目はほぼ一緒ですが、若干差異があるのが特徴。

日本語名称

次に日本語名称。

このように「体」が入っているか否かに差異あり。

搭載されてるウェイト

最後にデフォルトのfont-weightに違いがあります。

これが一番の違いですね。

WindowsではLight（細字） / Regular（標準）が含まれているのにもかかわらず、Macには搭載されていません。

ようはfont-weight: 400;と標準太さを指定しても、MacではMedium（中字）で表示されるということ。

つまりMacではテキストが綺麗に見えるのに、Windowsでは細くてみずらいといった現象が起きてしまう。

Windowsユーザーからは見にくくなる

ちなみに文字が細すぎるがゆえ、Windowsユーザーからはかなり見にくく反映されます。文字がかすれているような感じ。

そのため指定するfont-weidthは太くしておいたほうが良いでしょう。（記述方法は後ほど）

游ゴシックのMac・Windowsの違い【注意点】

游ゴシックはMacとWindowsで違いがあることがわかりました。

その違いがあるために、注意点もいくつか存在します。
それがこちら。

注意点①：ブラウザによる違い

MacかWindowsかだけではなく、見るブラウザによっても表示が違って見えてしまうんですよね。

そのためブラウザ間でも綺麗に表示されるような設定をする必要があります。（記述方法は後述しますね）

ジト

WindowsのChromeが一番きたなく見えてしまうそう。。

注意点②：font-weightの数値指定

先ほどMacには細字や中字がないことをお伝えしました。

そのため游ゴシックを使用する時の注意点として、CSSにてfont-weightを500に指定しておくべきということです。

これでWindowsユーザーの読みにくさを解決に導きます。

といっても游ゴシックが利用できないPCからすると、代わりに表示された他フォントが太く見えてしまうという欠点もありますが。。これはしょうがないかと。

【游ゴシック】MacとWindowsに適したfont-familyの記述

違いや注意点を考慮したうえで、最後に游ゴシック用のfont-familyの記述を紹介していきます。

CSSコード

記述方法はこちら

body{
  font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
}

もしくはこちら↓

body{
  font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
  font-weight:500;
}

サンプルを作成してみました！

下記にサンプルを作成しました！見え方が違うかと思うので、ぜひご覧ください！

See the Pen MacとWindowsに適したfont-familyの記述（サンプル） by jito-coder (@jito-coder) on CodePen.

<p class="test01">
    ”游ゴシック”のみ<br>
    MacとWindowsに適したfont-familyの記述
</p>
<p class="test02">
    ”游ゴシック”, “游ゴシック体”のみ<br>
    MacとWindowsに適したfont-familyの記述
</p>
<p class="test03">
    ”游ゴシック”, “游ゴシック体”,"Yu Gothic",YuGothic<br>
    MacとWindowsに適したfont-familyの記述
</p>
<p class="test04">
    "Yu Gothic Medium", "游ゴシック Medium"で指定<br>
    MacとWindowsに適したfont-familyの記述
</p>
<p class="test05">
    font-weight:500;を指定<br>
    MacとWindowsに適したfont-familyの記述
</p>

.tes01 {
    font-family: "游ゴシック", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
}

.test02 {
    font-family: "游ゴシック", "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
}

.test03 {
    font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
}

.test04 {
    font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
}

.test05 {
    font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    font-weight:500;
}

【解説】游ゴシックのMac・Windowsの違い【font-family】：まとめ

ジト

游ゴシックのフォントを使う時はこれらを覚えておこう！

コーディング知識を
『チート級』に得れる教材を作成！

見てみる⋙