【游ゴシック】macとwinの差異！

こんにちわ、T橋です( ˆoˆ )))三

みなさんはどんな夏休みを過ごしましたか？
私は秋田出身のイラストレーター・にしむらゆうじさんの展示会に行きました(と〜〜〜〜ってもかわいかった・・・)
好きな世界観にどっぷり浸かり、友達と遊んだりとにかく楽しい夏でした。

・・・本題に行きます！

最近のwebデザインのトレンドは游ゴシックが流行りの兆し！

游ゴシックといえばカタカナの「タ」が特徴的な気がします。細くて綺麗ですね。

游ゴシックを使ってwebデザイン/コーディングするぞ〜∩(´∀｀∩)

・・と意気込むのは良いのですが、
デザイナーもコーダーも何点か確認しないといけないので備忘録的にまとめました。

1.macとwinで微妙に違う！！

まずは游ゴシックのもろもろを各OSの公式サイトで確認します。

macは名称に「体」が入っていますね。
英語名称も地味に半角スペースの違いが。。
そして使えるウェイトにも差があります。

ブラウザでの差異を生まないために、ウェイトはミディアムかボールドでデザインをしましょう。
細い文字だとwindowsでかすれて汚く見える事例が多発しています( ˆqˆ )

結論
デザインはミディアムかボールドのウェイトでしよう

2.作業前の確認

コーダーはコーディング作業に取り掛かります。

仕様書に従ってルールを設定します。

3.font-familyの記述

ブラウザの仕様が決まったところで、あとはcssに記述するだけ・・・。

どーん

See the Pen
yugothic by miyuki-takahashi (@takamiii-158cm)
on CodePen.

3パターンのfont-familyを設定してみました。
正しく游ゴシックで表示されているのは緑色の「3番目」の設定だけだと思いますが、
みなさんのブラウザではどう見えていますか？

1番目→”游ゴシック”の記述のみ

macとwinで名称が違うため、反映されず

・

2番目→”游ゴシック”, “游ゴシック体”　と記述しているけどうまく反映されない。。

実は日本語のフォント名は、英語名でも記述をしないとブラウザによって反映されない場合があります。（特にsafari）

・

3番目→”Yu Gothic Medium”, “游ゴシック Medium”, YuGothic, “游ゴシック体”　と記述

■名称：winとmacで等しく表示するため
■ウェイト：windowsでかすれて表示されるのを防ぐため記載
■英語名称での記載：すべてのブラウザで等しく表示するため記載

3つの要素をあますことなく記述して、これで完璧な記述になりました・・。
1つのフォントを表示するだけなのにこんなに記述しないといけないのですね〜〜
勉強になります

こういった案件を取り扱うときまで覚えていようと思いました( ˆoˆ )
メイリオもmacとwinで日本語名・英語名があるので気をつけましょうね。

楽しかった夏休みも終えて引き続きお仕事がんばります！