cssにfont-familyで指定するんですが、「css font-family」で検索すると
色々な人が「こんな指定がいいぞ～」と説明してくださっています。
プロ（Webデザイナー）はフォント一つにもそれぞれコダワリがあるんだなぁと思いました。
デザインを重視しないWebアプリの場合、社内用であったり、関連会社との企業間システムであったりするので
ブラウザも限定されてきます。
そんな古いIEまで対応しなくても良いし、正直な所フォントは読みやすければだいたいでいいです。
こちらのサイトが説明がシンプルでわかりやすかったです。
6666666（セブンシックス） CSSのfont-family指定に関する考察 2014年版
こちらの説明も細かく参考になりました。
DTP Transit CSSでのフォント指定について考える（2014年）
スタイルシートでサイト全体のフォントを指定する
※以下のフォントは、あくまでも「フォントはだいたいでいいよ～」って人の為のフォントです。font-familyの基本形
body {
font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
font-familyには優先順位の高いフォントから記載していきます。
日本語フォントやスペースが含まれるものは"(ダブルクォテーション）か’（シングルクォテーション）で囲みます。
「Mac用欧文フォント,win用欧文フォント,Mac用和文フォント,Win用和文フォント,適用できるフォントがなかった場合に表示するゴシック系フォントsans-serif」の順で設定するようです。
これはMacにofficeをインストールしているとWin用フォントが入っている可能性が高いので、先にMac用フォントを記載することで適用フォントを優先させるそうです。
上記の例では欧文フォントと和文フォントを分ける必要がないので、Mac用フォントとwin用フォントとsans-serifを指定しています。
mac用フォントもいらないかもと思ったのですが、iosやipadのフォントも「Hiragino Kaku Gothic ProN」で表示させるようなので残しておきます。
font-familyに游ゴシック体が追加する
OS X Mavericks (10.9)とWindows 8.1に游ゴシック体が追加されました。将来的にこちらのフォントの追加がデフォルトになってくるかと思うので、游ゴシック体を追加したバージョンです。
body {
font-family: "游ゴシック体", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
font-familyでandroid端末にも対応する
android端末はsans-serifにお任せでもいいと思うのですが、対応するならこちら。
body {
font-family: Roboto, "Droid Sans", "游ゴシック体", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
android4以降用にRobotoを指定、android4以前用にDroid Sansを指定します。
0 件のコメント:
コメントを投稿