いつも迷うfont familyの指定。CSS font familyフォント指定の基礎知識

新たにホームページを制作するときに毎回悩むfont family の指定。
自分の理解が足りていないのが原因なのですが。
改めて調べてみてまとめます。

font familyの記述方法

※フォントファミリ名にスペース、全角を含むフォントファミリは、「’」か「”」で囲む。
例えば、Times New Roman,Luchida Grandeなどは、

Airal,Verdanaなどは

 日本語フォントの場合、日本語と英語(アルファベット)を併記するのはなぜ?

今まで特に気にせず使っていたのですが(バカ)、ヒラギノ角ゴなど日本語フォントをfont-family に指定するとき、日本語と英語で両方記載するのはなぜなのか?

firefoxの古いバージョンでは日本語でフォントファミリを指定すると解釈されないためだそうです。現在のモダンブラウザであれば英語表記だけで問題ないようです。

遊書体(ゴシック、明朝)について

Windows8.1やOSX Mervericks から標準フォントとしてインストールされている。読みやすくてきれいなフォントなので、インストールされているPC用に指定してもよいかも。

メイリオ、ヒラギノ角ゴなどの記述の優先順位は?

Windows,OSXそれぞれ環境によって、インストールされているフォントは変わってきますが、
OS Xで、メイリオ、MS Pゴシックが表示されてしまう場合
-> Office for Macをインストールしている場合

Windowsでヒラギノ角ゴが表示されてしまう場合
-> 主にクリエイティブ系の方々の場合

どちらがにしたらよいか、メイリオの可読性を考えると前者のほうがよろしいのではという意見とMacまでメイリオに侵食されたくないような意見も
どちらにしたらいいかは、状況によって判断。(苦しいな)

※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を先頭にしないことだそうです。

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

 

使いやすいと思われるフォント指定

ゴシック体

明朝体

 

 

SNSでもご購読できます。