■font-family
・基本的にフォントは、WebサイトやHTMLメール全体に対して一括指定
・一般的にはbodyタグに対してCSSでフォントを指定
・font-familyプロパティには、「フォントファミリー名」か、「総称フォント名」のいづれかを指定
・font-familyに複数のフォントを指定した場合、前に書いたフォントから優先的に適用。指定したフォントが全て表示されなかった場合の対策として、値の最後に総称フォント(ゴシック体や明朝体)を指定
 

■フォントファミリー名
「Arial」や「メイリオ」など、欧文フォントや日本語フォントの具体的な名称
・font-familyに指定するフォントファミリー名は、【正式な固有名称】で指定する
・同じフォント名でもOSによって固有名称の表記が異なる
・半角・全角・スペース位置などが間違っていても正しく機能しない
フォントファミリー名は、ダブルクォーテーション(”)、またはシングルクォーテーション(’)の引用符で囲う
・最新の各ブラウザでは引用符で囲わなくとも機能するが、フォントファミリー名と総称フォント名との区別をする目的と、フォント名の区切りをわかりやすくするためにも引用符で囲っておくとよい
・過去に日本語名のフォントを認識しないブラウザがあった名残で両方表記しているが、フォントファミリー名に、日本語名(例:メイリオ)と英語名(例:Meiryo)の両方は指定不要でどちらかを指定しておけば問題なく表示される

■総称フォント
ゴシック体や明朝体のように、フォントの大きなカテゴリーのこと
・総称フォントを指定した場合は、通常はOSやブラウザごとにデフォルト設定されたフォントが自動的に適用される
・一般的に、総称フォントには、sans-serif(ゴシック体)か、serif(明朝体)のいづれかを指定
・cursive(筆記体)、fantasy(装飾文字)については、実際には具体的なフォントが割り当てられず、ゴシック体や明朝体で表示されるため実用的ではない
総称フォント名は引用符では囲わない。もし引用符で囲ってしまうと、ブラウザにフォントファミリー名と判断されることがある

 font-familyに指定できる代表的な総称フォント名
 総称フォント名…sans-serif・フォントカテゴリー…ゴシック体
  適用フォント例…メイリオ、ヒラギノ角ゴシック、Arial
 総称フォント名…serif・フォントカテゴリー…明朝体
  適用フォント例…MS P明朝、ヒラギノ明朝、Times
 総称フォント名…system-ui・フォントカテゴリー…OSのUIと同じフォント    
  適用フォント例…Yu Gothic UI、Meiryo、ヒラギノ角ゴシック、San Francisco
 総称フォント名…monospace・フォントカテゴリー…等幅フォント
  適用フォント例…MSゴシック、MS明朝、Osaka-Mono
 総称フォント名…cursive・フォントカテゴリー…筆記体
  適用フォント例…Comic Sans MS、Scriptなど
 総称フォント名…fantasy・フォントカテゴリー…装飾系フォント
  適用フォント例…alba、Chickなど

■複数のフォントを指定する場合はカンマ区切り
・フォントファミリー名は複数指定が可能
・各フォントファミリー名をカンマ(,)で区切って記述。カンマの後のスペースは空けても空けなくてもどちらでも問題なし

■英語部分(半角英数字)に欧文フォント、日本語部分は日本語フォントを指定
・font-familyに欧文フォント名を日本語フォント名よりも先に指定

 すべてのテキストを日本語フォントで表示したい場合、欧文フォントは指定不要
 body {font-family:Helvetica,ヒラギノ角ゴシック(Hiragino Sans);}
             
  欧文フォント,日本語フォント
 body {font-family:ヒラギノ角ゴシック(Hiragino Sans)    ,Helvetica;}
                               日本語フォント         ,欧文フォント