WEB Tips デザイン・コーディング

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

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

新たにホームページを制作するときに毎回悩む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;

今月キャンペーン特典があるサービス

  • ConoHa WING
    WINGパック36ヶ月で月額652円 55%OFF - 2023年3月31日(金)16:00まで
  • エックスサーバー
    月額費用が最大30%オフの693円&ドメイン永久無料、さらに移転代行も0円中 - 2023年4月21日(金)12:00まで
  • Xserverビジネス
    12ヶ月以上契約で初期費用無料、3ヶ月・6ヶ月で初期費用半額 - 2023年4月4日(火)12:00まで
  • カラフルボックス
    .jp取り扱いスタート。BOX2以上の月額費用が25%OFFのクーポンコード「SERVER25

-WEB Tips, デザイン・コーディング
-