Web開発

2015年 font-familyを整理して游ゴシックなど追加しました(サンプルあり)

游ゴシック

OS X MavericksとWindows 8.1から游ゴシックというフォントが追加されました。Windowsでアンチエイリアス(境界を滑らかに表現)して綺麗に見せるフォントといえばメイリオ(Meiryo)が一般的でしたが、Windows上で游ゴシックという綺麗なフォントが出たので、font-familyを整理する意味でいくつかのサイトに追加してみました。

游ゴシックを組み込んで指定したfont-familyの結論

最終的にfont-familyはこんな感じの指定になりました。

font-family: "Hiragino Kaku Gothic ProN","YuGothic",Meiryo,"メイリオ",sans-serif;

Macで見たときにはヒラギノ角ゴが優先され、Windowsの8.1以降は游ゴシックが優先、Windowsでメイリオに対応している場合はメイリオという設定です。本サイトもこの設定にしてみました。

游ゴシックを入れるといいながらMac環境で先にヒラギノ角ゴを設定しちゃっています。。。

理由は以下の画像のとおりです。Mac OSX YosemiteのFireFoxでのキャプチャです。

游ゴシックを指定

游ゴシック

ヒラギノ角ゴを指定

ヒラギノ角ゴこのページのキャプチャで少しわかりづらくてすみません。。好みはあるでしょうが、ヒラギノ角ゴのほうが綺麗に見えます。数字などは游ゴシックのほうが好みですが。

本当はWindowsの游ゴシックのキャプチャも載せたかったのですが、Windowsの環境がなかったので。。。すみません。

当面はこのフォント指定で設定しようと思います。

参考までに明朝の場合はこんな感じですかね。

"ヒラギノ明朝 ProN W6","YuMincho", "HG明朝E", "MS P明朝", "MS PMincho", serif

コメントを残す