説明
動作確認環境：Python3.6 / macOS 10.13.6
font-familyプロパティ
font-familyプロパティを使うと、要素のフォントの種類を設定出来る。
font-family: 値1, 値2, 値3;
値は、複数の候補が設定可能で
フォント名かフォントタイプで指定する。
Webページのテキストは
利用者が使っている機器が持っているフォントに依存するため
フォントの有無でページのイメージが変わってしまう。
そこでなるべく意図したイメージで表示を可能とするため
複数のフォント名を指定出来るようになっている。
具体的には、複数の候補を記述すると
記述順に優先してインストールされているフォントが使われる。
候補のフォント名を記述した後
最後にフォントタイプを指定することで
候補にあげたフォントがすべて利用出来ない場合
同様のイメージのフォントが使われる。
フォント名の例
”ヒラギノ角ゴシック”, “メイリオ”, “Meiryo”,”ＭＳ ゴシック”,”ＭＳ 明朝”
フォントタイプは、以下の5つ
・sans-serif
ゴシック系
・serif
明朝系
・cursive
筆記体、草書体
・fantasy
装飾系
・monospace
等幅系
使用例
例１ font-familyでフォントを指定
H1,H3要素は、ゴシック系
第一指定に、ヒラギノ角ゴシック
第二指定に、MSゴシック
第三指定に、sans-serif（フォントタイプ：ゴシック）
H2,P要素は、明朝系
第一指定に、ヒラギノ明朝 ProN
第二指定に、MS明朝
第三指定に、serif（フォントタイプ：明朝）
MacでもWindowsでもゴシックや明朝で表示されるように指定することで
意図したデザインに近い形で表示されるようにすることが出来る。
html
<body>
<h1>見出し１はゴシックで</h1>
<h2>見出し２は明朝で</h2>
<h3>見出し３はゴシックで</h3>
<p>本文は明朝で</p>
</body>
CSS
h1 { font-family: "ヒラギノ角ゴシック", "ＭＳ ゴシック", "sans-serif" ; }
h2 { font-family: "ヒラギノ明朝 ProN", "ＭＳ 明朝", "serif" ; }
h3 { font-family: "ヒラギノ角ゴシック", "ＭＳ ゴシック", "sans-serif" ; }
P { font-family: "ヒラギノ明朝 ProN", "ＭＳ 明朝", "serif" ; }
表示
