新たにホームページを制作するときに毎回悩むfont family の指定。
自分の理解が足りていないのが原因なのですが。
改めて調べてみてまとめます。
font familyの記述方法
font-family: フォントファミリ名1,フォントファミリ名2,フォントファミリ名3;
※フォントファミリ名にスペース、全角を含むフォントファミリは、「'」か「"」で囲む。
例えば、Times New Roman,Luchida Grandeなどは、
font-family:'Times New Roman','Luchida Grande';
Airal,Verdanaなどは
font-family: Arial, sans-serif;
日本語フォントの場合、日本語と英語(アルファベット)を併記するのはなぜ?
今まで特に気にせず使っていたのですが(バカ)、ヒラギノ角ゴなど日本語フォントをfont-family に指定するとき、日本語と英語で両方記載するのはなぜなのか?
firefoxの古いバージョンでは日本語でフォントファミリを指定すると解釈されないためだそうです。現在のモダンブラウザであれば英語表記だけで問題ないようです。
遊書体(ゴシック、明朝)について
Windows8.1やOSX Mervericks から標準フォントとしてインストールされている。読みやすくてきれいなフォントなので、インストールされているPC用に指定してもよいかも。
font-family : "游ゴシック", YuGothic sans-serif; font-family : "游明朝", YuMincho serif;
メイリオ、ヒラギノ角ゴなどの記述の優先順位は?
Windows,OSXそれぞれ環境によって、インストールされているフォントは変わってきますが、
OS Xで、メイリオ、MS Pゴシックが表示されてしまう場合
-> Office for Macをインストールしている場合
Windowsでヒラギノ角ゴが表示されてしまう場合
-> 主にクリエイティブ系の方々の場合
どちらがにしたらよいか、メイリオの可読性を考えると前者のほうがよろしいのではという意見とMacまでメイリオに侵食されたくないような意見も
どちらにしたらいいかは、状況によって判断。(苦しいな)
font-family :'Hiragino Kaku Gothic ProN W3',Meiryo,sans-serif;
※MS Pゴシックは特に指定しなくとも、最終的には表示されるのであえて指定する必要がないと意見も。納得。
スマートフォン、タブレット環境でのフォント指定。
iOSにはヒラギノ書体が使えます。
Androidは、Roboto(Android4以降)、Droid Sansを指定できます。
Mac,Windows両方に標準でインストールされているフォントは?
ゴシック:
Arial,Arial Black, Comic Sans MS,Courier,Courier New,Impact,Trebuchet MS,Verdana
明朝体:
Georgia,Times New Roman
windowでもOSXでも同じ表示ウェブサイトを表示させてたい場合は、上記フォントが
オススメですね。(欧文に限る^^;)
最新OSだけを考慮するなら遊書体の指定も
IEでのHelveticaバグ
Helveticaを先頭に記述しているとIE9,IE10で表示されないバグというのがあるとのこと。
解決方法は、Helveticaを先頭にしないことだそうです。
font-family: "Arial","Helvetica";
Helveticaを使いたいときは要注意ですね。
参考にさせていただいたとともに、勉強になりましたサイトさま
font-familyについてのお勉強 – フォント指定のベストプラクティスを追及
http://a-messenger-from-sunday.com/article/studying_font-family/
CSSでのフォント指定について考える(2014年)
http://www.dtp-transit.jp/misc/web/post_1881.html
CSSのfont-family指定に関する考察 2014年版
http://www.6666666.jp/design/20140428/
CSSで半角英数字+日本語のフォントを設定する方法
http://fridayeight.jp/2012/07/17/1111/
とほほのwww入門 フォントの一覧
http://www.tohoho-web.com/how2/fontfamily.htm
使いやすいと思われるフォント指定
ゴシック体
font-family: Verdana, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
明朝体
font-family: "Times New Roman", "游明朝", YuMincho, "Hiragino Mincho ProN", Meiryo, serif;