CSS

CSSのフォント指定font-family、コレがおすすめ!

CSSフォントファミリーはこれにきめました。游ゴシック、游明朝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;  }    

これでも良さそうです。

結論

クライアントからこだわりがなければ、なんでもいいよね。

美しく行きましょう!

 

でわ!