游ゴシックをつかう場合のfont-familyの書き方

FRONTEND

2019.04.20

2019.04.22

游ゴシックをつかう場合のfont-familyの書き方

サイトやページをコーディングするとき、font-familyに游ゴシックを指定したいときの記述方法です。

すでに様々なところで書かれていますが、游ゴシックをつかうときは注意が必要です。理由はブラウザやOSによって認識の違いがあるから。例えばWindows10では游ゴシックで書かれたテキストはかなり細く表示されてしまいます。

解決策としてfont-faceをつかった書き方などもあるみたいですが、個人的には今回紹介する書き方が一番スッキリしていてベストかと思います。

font-familyに游ゴシックを指定するときの書き方

通常時

font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;

「游ゴシック Medium」、「Yu Gothic Medium」という指定がWindowsの指定になり、「游ゴシック体」と「YuGothic」という指定がMacへの指定になっています。Mediumという指定を記述することで、Windowsで游ゴシックが細くなってしまうのを防ぎます。

font-weight:bold;をつかうとき

次は太字にするときです。これまで通り、font-weight:bold;という指定にすると、Macでの游ゴシックの表示は太くなり過ぎてしまうようです。なので、下記のように記述すると良い感じです。

.classname {
font-weight: bold;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}