Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8700

游ゴシックを採用したら癖が強かった

$
0
0

遊ゴシックの特徴として有名なものは、WindowsでもMacでも使える、ということでしょうか。
しかしそれだけで採用すると調整に時間がかかってしまうことになる可能性があります。
下記のことを頭の片隅に置いといて採用するかどうかを決めてもらえたらと思います。

1. WindowsとMacでfont-familyの指定方法が違う

  • Mac
css
font-family: YuGothic;
  • Windows
css
font-family: 'Yu Gothic';

※Windowsの場合、YuとGothicの間に半角スペースが必要。
※半角スペースが入るのでYu Gothicをクオーテーションで囲う。

2. IEで文字下に変な余白ができる問題

image_01.png
IEで見ると上の画像のようにテキストが上に少しずれます。
CSSハックかユーザーエージェントを使って、paddingなど個別に調整する必要があります。

3. Windowsの Chromeでかすれる

解決方法 1(游ゴシックに続けて指定するフォントが影響を受けない場合)

font-weight: 500;

解決方法 2(font-weight: 500;を使いたくない場合)

font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;

こうすることで、Macでは普通の游ゴシックが適用され、Windowsでは「 游ゴシック Medium」になります。

4. スマホiOS、Andoroidには游ゴシックが入っていない

どうしても游ゴシックを使いたい場合は、有料のWebフォントを使うことになりそうです。

感想

以前までは、游ゴシックは万能フォントと思っていました。
しかし実際は癖が強く採用するかどうか迷うフォントだということが分かりました。

参考
【2020年版】游ゴシックを使ったおすすめfont-family指定
Windowsの游ゴシックをfont-weightを使わずにMacに合わせる方法
游ゴシックのfont-family指定方法!@font-faceは絶対NG!WindowsのChromeでかすれる問題徹底検証
Webで游ゴシックをiPhoneやAndroidで表示できない?表示するには?


Viewing all articles
Browse latest Browse all 8700

Latest Images

Trending Articles

<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>