2013年04月12日 category : Web tags :

結局どれがいいの?CSSのfont-familyの設定を見直してみた

このエントリーをはてなブックマークに追加

font-family

”font-familyって結局何にすればいいんでしょう?本当に久しぶりに指定を変更してみました。”

CSSにも流行りがあったり定番があったりしますけどイマイチ決定打にかけるプロパティがfont-familyではないでしょうか?

一度これって決めると使いまわすのですが(よくない?)たまに見直しも必要かなと思いちょっと調べなおしてみました。フォント自体の知識が浅いので、これで完璧!とスッキリはしないのですが少し変更を加えたのでご紹介。

01 . 今までの指定

“メイリオ”, “ヒラギノ角ゴ Pro W3″, “Hiragino Kaku Gothic Pro”,Meiryo, Osaka, “MS Pゴシック”, “MS PGothic”, sans-serif;

今までこのブログで使用していたのは上の形です。わりとオーソドックスな形ではないでしょうか?これに色々人の意見を掻い摘んで手を加えてみます。

Macユーザーのためにヒラギノを先に書く。Macにはメイリオがデフォルトでは入っていないのだけどOffice for Mac を入れるとメイリオがインストールされるのでメイリオが先に書いてあるとメイリオで表示されてしまう。引用元:DevAchieve様

なるほど…Office for Mac使ってないので全く知らなかった。でも順番を入れ替えてヒラギノを前に持ってくるとWindowsにヒラギノいれてる人もいるわけで…

winにヒラギノを入れるケースのほうが稀であると思うので、僕は個人的にはヒラギノを先頭にするのが現時点では良いのではないかと感じている。引用元:DAICHIFIVE™ blog+様

私もそう思います。よし入れ替えよう。

ヒラギノはProではなくProN。
OS Xの和文標準フォントがヒラギノProからProNに変更されてもう数年がたちます。Proはいちおう後方互換のために残されているようですが、iOSにはProNしか入っていません。引用元:遠近法ノート様

Osakaは不要。MacのフォントがOsakaだったのは、もう10年以上前の話です。大手サイトで未だにOsakaを指定しているところもありますが、表示が汚いOsakaは入れないようにしましょう。引用元:遠近法ノート様

確かにあまり深く考えずに「Osaka」書いてるな…この機会に消そう。

引用部分以外にも皆さん詳しく説明してくださっています。これらを加味して指定を以下のように変更してみました。

“ヒラギノ角ゴ Pro W3″, “Hiragino Kaku Gothic ProN”, “メイリオ”, Meiryo, “MS Pゴシック”, “MS PGothic”, sans-serif;

font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;

02 . どれがいいのだ?

今回font-familyを指定するにはどれがいいかな?ということで調べてみましたが、そもそもfont-familyを製作者側が決めるべきではない的なお話も見受けられましたし、色々意見の別れるところだとは思います。

Win、MacそれぞれOSを判断して処理を分けるという手法もありました。その場合、UbuntuとかLinux系のフォントってどうなってるんでしょ?

まだまだ調査・改善の余地は大いにありそうですが、しばらく今回変更してみたfont-familyを使ってみようと思います。お勧め設定ありましたら教えて下さい。

HOME >>  Web > 結局どれがいいの?CSSのfont-familyの設定を見直してみた