コーディングの効率化を極めるためのテクニック
フォント名の書き方
思うようなフォントが表示されなくてつまずいた経験はありませんか？
私自身、ずっと悩まされてきた問題でした。いまも現在進行形です。。
一般的にフォントの書き方は、
font-family: MS P Gothic,’MS P ゴシック’,Meiryo,'メイリオ',sans-serif ; のように記述します。
・ 日本名'のところは、『 "" 』 or 『 ’’』 で囲む。
・ 以前はfontタグを使用してまとめて書いていた。（HTML５にて廃止になったので、使用しないこと）
では、それぞれどんな字体でしょうか？
フォントに慣れ親しんだ方なら、フォント名と実際表示される字体がぱっとわかるかもしれません。
フォントの字体がぱっと浮かばない、、、、という方に主な字体の表示例をまとめました
主なフォント
arial arial (◁ 'arial' )
MSゴシック MSゴシック（◁ 'MS ゴシック',MS Gothic’） windowの標準フォント
ＭＳ明朝 ＭＳ明朝（◁'ＭＳ明朝'）※大文字
windowの標準フォント
メイリオ,Meiryo（◁ 'メイリオ,'Meiryo')
windowsの標準フォントであるMSゴシックとMS明朝に更に追加された可読性の良いフォント
游ゴシック,Yu Gothic （◁ '游ゴシック',Yu Gothic'）※英語名のYuとGothicの間は半角スペース
windowsとmacの両方の共通フォント
sans-serif sans-serif （◁ 'sans-serif')
補足色々なサイトを見ると、フォント指定の最後には、sans-serif が指定されています。sans-serif とは、総称ファミリー名と呼ばれゴシック体を意味します。すべてのフォントにマッチしなかった場合、標準で規定されているゴシック体のフォントが使用されるという意味です。※Windows ではメイリオ、MS ゴシックに相当
※Mac ではヒラギノ角ゴシック
フォントが表示されない場合
よくデフォルトでフォントがない場合があります。
その場合は、ブラウザによって収録されているフォントが異なっていても、同じフォントでデザインできるようにダウンロードして利用できるフォントがあります。
"Google Web Fonts" ※一部のIEでは表示されない
"typekit"
などです。
この辺りも利用すると画像で表現していたものがCSSで済むようになります。ただ、日本語のフォントは、読み取りまで時間がかかります。
以上メモでした。