font-family

フォントの種類を指定します。フォントを指定する際、フォント名にスペースを含むものはダブルクオーテーション(")かシングルクオーテーション(')で括るようにしてください。


ブラウザ

IE3 / IE4 / IE5 / IE5.5 / IE6 / N4 / N6 / N7 / O6 / O7 / O9 / Fx1 / Fx2 / IE5 mac

▲PageTop

書式

要素[.class名][#id名]{ font-family : 値[, ･･･]; }

▲PageTop

指定できる値

値 初期値 意味
フォント名 「MS 明朝」や「MS ゴシック」など、フォント名を指定します。
フォントファミリー名 フォントファミリーとは、****Boldであるとか****itaricなど、****の部分が共通しているフォントのことです。 指定する場合は、****の部分を指定することになります。
serif 明朝系フォントです。
sans-serif ゴシック系フォントです。
cursive 草書体・筆記体系フォントです。
fantasy 装飾的なフォントです。
monospace 等幅フォントです。
inherit 親要素の値を継承します。

▲PageTop

サンプル

ソースコード

<html>
  <head>
    <title>サンプルコード</title>
    <style type="text/css">
      #sample1 {
        font-family : "ＭＳ Ｐ明朝",serif;
      }
      #sample2 {
        font-family : serif;
      }
      #sample3 {
        font-family : sans-serif;
      }
      #sample4 {
        font-family : cursive;
      }
      #sample5 {
        font-family : fantasy;
      }
      #sample6 {
        font-family : monospace;
      }
    </style>
  </head>
  <body>
    <div id="sample1">font-familyサンプル1</div>
    <div id="sample2">font-familyサンプル2</div>
    <div id="sample3">font-familyサンプル3</div>
    <div id="sample4">font-familyサンプル4</div>
    <div id="sample5">font-familyサンプル5</div>
    <div id="sample6">font-familyサンプル6</div>
  </body>
</html>

表示結果

font-familyサンプル1
font-familyサンプル2
font-familyサンプル3
font-familyサンプル4
font-familyサンプル5
font-familyサンプル6

▲PageTop

関連項目

CSS

font / font-style / font-variant / font-weight / line-height / font-size

▲PageTop

▲