font

フォント関係をまとめて指定することができます。また、font-familyプロパティにはないシステムフォントを指定することができます。


ブラウザ

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

▲PageTop

書式

要素[.class名][#id名]{ font : [font-style] [font-variant] [font-weight] font-size[/line-height] font-family;

システムフォントを指定する場合は次のようになります。

要素[.class名][#id名]{ font : システムフォント; }

▲PageTop

指定できる値

値 初期値 意味
inherit 親要素の値を継承します。

・font-styleプロパティの指定(スタイルの指定)
値 初期値 意味
normal ○ 普通のスタイルです。
italic イタリック体にします。
oblique 斜体(字を単純に斜めにしただけ)にします。

・font-variantプロパティの指定(スモールキャピタルの指定)
値 初期値 意味
normal ○ 通常通りの表示にします。
small-caps スモールキャピタルで表示します。
※スモールキャピタルとは、単語の先頭文字を大文字、それ以外の小文字は、大文字を小文字サイズで表示さる書式です。

・font-weightプロパティの指定(太さの指定)
値 初期値 意味
normal ○ 通常の太さです。
bold 一般的な太字の太さです。
lighter 太さを1段階、相対的に下げます。
bolder 太さを1段階、相対的に上げます。
数値(100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900)

・font-sizeプロパティの指定(大きさの指定)
値 初期値 意味
数値+単位 サイズを指定します。単位例：px,em,ex,%
smaller 親要素よりも1段階小さくします。
larger 親要素よりも1段階大きくします。
xx-small <font>要素でsize="1"としたときの大きさに相当します。
x-small <font>要素でsize="2"としたときの大きさに相当します。
small <font>要素でsize="3"としたときの大きさに相当します。
medium ○ <font>要素でsize="4"としたときの大きさに相当します。
large <font>要素でsize="5"としたときの大きさに相当します。
x-large <font>要素でsize="6"としたときの大きさに相当します。
xx-large <font>要素でsize="7"としたときの大きさに相当します。

・line-heightプロパティの指定(行間の指定)
値 初期値 意味
normal ○ 通常の行間です。
数値 フォントサイズに数値を掛けた行間になります。
数値+単位 行の高さを指定します。単位例：px,em,ex
数値+% フォントサイズに%を掛けた行間になります。

・font-familyプロパティの指定(種類の指定)
値 初期値 意味
フォントファミリー名・フォント名 フォントファミリーとは、****Boldであるとか****itaricなど、****の部分が共通しているフォントのことです。指定する場合は、****の部分を指定することになります。
serif 明朝系フォントです。
sans-serif ゴシック系フォントです。
cursive 草書体・筆記体系フォントです。
fantasy 装飾的なフォントです。
monospace 等幅フォントです。

・システムフォントの指定
値 初期値 意味
caption Windowのタイトルに使われているフォントです。
icon アイコンの名前に使われているフォントです。
menu ドロップダウンメニューなどに使われているフォントです。
message-box ダイアログボックスに使われているフォントです。
small-caption Wordの作業ウィンドウのタイトルなどに使われているフォントです。
status-bar ステータスバーに使われているフォントです。

▲PageTop

サンプル

ソースコード

<html>
  <head>
    <title>サンプルコード</title>
    <style type="text/css">
      #sample1 {
        font : caption;
      }
      #sample2 {
        font : icon;
      }
      #sample3 {
        font : menu;
      }
      #sample4 {
        font : message-box;
      }
      #sample5 {
        font : small-caption;
      }
      #sample6 {
        font : status-bar;
      }
      #sample7{
        font : italic normal bold 12pt/2em fantasy;
      }
    </style>
  </head>
  <body>
    <div id="sample1">fontサンプル1</div>
    <div id="sample2">fontサンプル2</div>
    <div id="sample3">fontサンプル3</div>
    <div id="sample4">fontサンプル4</div>
    <div id="sample5">fontサンプル5</div>
    <div id="sample6">fontサンプル6</div>
    <div id="sample7">fontサンプル7</div>
  </body>
</html>

表示結果

fontサンプル1
fontサンプル2
fontサンプル3
fontサンプル4
fontサンプル5
fontサンプル6
fontサンプル7

▲PageTop

関連項目

CSS

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

▲PageTop

▲