CSSのフォントファミリー指定を、ブラウザやOS間の差異を埋めるために、毎度時間をかけないようにメモすることにしました。
font-familyはこれで!
body { /* フォントファミリ明朝 */ font-family:Times New Roman , "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", Hiragino Mincho ProN , "MSP明朝","MS PMincho","MS 明朝",serif; } body { /* フォントファミリゴシック */ font-family: Verdana, "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; }
「Verdana」と「Times New Roman」はWindowsとMacの両方にインストールされているフォントです。これらの英語フォントが先に来るのは、日本語フォントの英数字表示が美しくないからです。
同じく、「游ゴシック」「游明朝」は、Winodws 8.1とOS X Mavericks(10.9)から、両OSに搭載された、非常にきれいなフォント(僕的に)。
しかし、適用されるフォント名が微妙に違うので、必ず「“游ゴシック”, YuGothic,」などと日本語、英語で表記します。
フォントのウェイトについて
ヒラギノとかでよく見かける表記で「W3」「W6」などとありますが、こちらは省略しても表示はされます。
が、古いヴァージョンのSafariとFirefoxで表示がされない場合があるので、念の為表記します。
「MS P」系のフォント
これらは表示が美しくないので、書かないことにします。…のつもりが、どうしても明朝を指定したい!というときのため、明朝系のフォントファミリを指定するときのみ書いておきます。
body { /* フォントファミリ明朝 */ font-family:Times New Roman , "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", Hiragino Mincho ProN , "MSP明朝","MS PMincho","MS 明朝",serif; } body { /* フォントファミリゴシック */ font-family: Verdana, "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; }
と、いうわけで、このような結論です。
補足
どうやら「Lucida Grande」を指定すると、、「ヒラギノ角ゴ」は勝手に出てきてくれるようなので、ゴシックで究極の省略形は
body{ /*フォントファミリゴシック*/ font-family:'Lucida Grande', Meiryo, sans-serif; }
これでも良さそうです。
結論
クライアントからこだわりがなければ、なんでもいいよね。
美しく行きましょう!
でわ!