最近のおしゃれなWebデザインにはfont-family指定が必須ですよね。
フォント指定のだめな例とよい例
例えば、
「日本語フォントをおしゃれに表示したいので、游ゴシックを指定したい！」という場合。
☓ だめな例
font-family: "游ゴシック" , "Yu Gothic”;
なぜだめかとういうと、↑この2つがデバイスに入っていないと、
意図しないフォントがあたってしまうことがあるからだ。
たとえば游ゴシックが入っていないスマホやwindowsなどでは、勝手に明朝体が適用されてしまったりする。
また、英字フォントの指定がないという問題もあるので、半角英数だけ意図しないフォントが適用されてしまったり。
◯ よい例
font-family: "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
font-familyの値は、カンマ区切りで左からマッチしたものが適用されていくので、ほぼすべての機種で大体意図したフォントを適用さることができる。
このフォント指定の意図は、翻訳すると
「macで游ゴシックとHelvetica Neue、windowsでメイリオとArial、iphoneならヒラギノと Helvetica, 、その他、Androidなどは機種によって違いすぎるからなんでもいいのでゴシック体当ててくれー」
と言った感じです。
※ sans-serif, serifについて
sans-serif → ゴシック体のデバイスフォント
serif → 明朝体のデバイスフォント
を選んでくれるのでどんなときも必須。
とくにフォントにこだわりがないときはこれで明朝かゴシックかだけ指定しておけばOK。
というか、何も指定しないとブラウザのデフォルトはほとんどsans-serifである。