CSS font-familyプロパティ

説明

動作確認環境:Python3.6 / macOS 10.13.6

font-familyプロパティ

font-familyプロパティを使うと、要素のフォントの種類を設定出来る。

  font-family: 値1, 値2, 値3;

値は、複数の候補が設定可能で
フォント名かフォントタイプで指定する。

Webページのテキストは
利用者が使っている機器が持っているフォントに依存するため
フォントの有無でページのイメージが変わってしまう。

そこでなるべく意図したイメージで表示を可能とするため
複数のフォント名を指定出来るようになっている。

具体的には、複数の候補を記述すると
記述順に優先してインストールされているフォントが使われる。

候補のフォント名を記述した後
最後にフォントタイプを指定することで
候補にあげたフォントがすべて利用出来ない場合
同様のイメージのフォントが使われる。

フォント名の例
 ”ヒラギノ角ゴシック”, “メイリオ”, “Meiryo”,”MS ゴシック”,”MS 明朝”

フォントタイプは、以下の5つ
・sans-serif
  ゴシック系
・serif
  明朝系
・cursive
  筆記体、草書体
・fantasy
  装飾系
・monospace
  等幅系

使用例

例1 font-familyでフォントを指定

 H1,H3要素は、ゴシック系
  第一指定に、ヒラギノ角ゴシック
  第二指定に、MSゴシック
  第三指定に、sans-serif(フォントタイプ:ゴシック)

 H2,P要素は、明朝系
  第一指定に、ヒラギノ明朝 ProN
  第二指定に、MS明朝
  第三指定に、serif(フォントタイプ:明朝)

MacでもWindowsでもゴシックや明朝で表示されるように指定することで
意図したデザインに近い形で表示されるようにすることが出来る。

html
  <body>
      <h1>見出し1はゴシックで</h1>
      <h2>見出し2は明朝で</h2>
      <h3>見出し3はゴシックで</h3>
      <p>本文は明朝で</p>
  </body> 
CSS
h1 { font-family: "ヒラギノ角ゴシック",  "MS ゴシック", "sans-serif" ; }
h2 { font-family: "ヒラギノ明朝 ProN", "MS 明朝",  "serif" ; }
h3 { font-family: "ヒラギノ角ゴシック",  "MS ゴシック", "sans-serif" ; }
P { font-family: "ヒラギノ明朝 ProN", "MS 明朝",  "serif" ; }
表示



タイトルとURLをコピーしました