ホームページの基礎（2. CSS 編）

2.7 フォント

このページでは，「フォント」に関連する主なプロパティについて説明します。

2.7.1 フォント関連の用語

フォント，字体，書体などフォントに関連する用語は非常に多くあります。ただ，その意味があまり明確にされずに雰囲気だけで使われていることも少なくありません。そこで，まずは，用語に関して明確にしておきましょう。

字体

「字体」とは，ある文字を他の文字と区別するための抽象的な概念のことです。 例えば，「十」という文字は縦線と横線が交わった形，「口」は四角などと表現されます。

字形（グリフ）

「字形」とは，抽象的な字体を書き表す場合に実際に描かれる具体的な形のことです。

書体（タイプフェイス）

同じ字体であっても字形が異なる場合があります。例えば，明朝とかゴシックと呼ばれるもので字形は異なります。このような筆法や意匠などの統一された字形を与えたものを「書体」と言います。

フォント

「フォント」とは，同じ書体，大きさ，外観（太字，斜め字など）の字形の集合のことです。

フォントファミリ

「フォントファミリ」とは，デザイン（書体，大きさ，外観など）の一貫性を保つためのフォントの集合のことです。例えば，「明朝体」のフォントファミリには，標準のフォント以外に，太字や斜め字の個別のフォントを持っているものがあります。

CSS総目次 | ページ先頭に戻る

2.7.2 font-familyプロパティ

「font-familyプロパティ」によって使用するフォントファミリを指定します。その書式は以下のとおりです。

font-familyプロパティ
値	[[フォントファミリ名 | 一般ファミリ名][,フォントファミリ名 | 一般ファミリ名]*] | inherit
初期値	UAに依存
適用対象	すべての要素
継承	する
パーセント値	受けつけない

フォントファミリ名

使用するフォントファミリ名(※ "Symbol"や"ＭＳ 明朝"など)を指定します。このファミリ名は「カンマで区切って複数指定が可能」です。該当するフォントファミリが利用者側に存在しない場合，指定された順序で該当するフォントファミリを探します。また，空白を含むファミリ名を指定する場合は，引用符で囲む必要があります。

一般ファミリ名

指定されたすべてのフォントファミリが，利用者側に存在しない場合， 一般ファミリ名を使用します。この一般ファミリ名は，キーワードとして提供されていて，つぎのものが指定できます。なお，一般ファミリ名に対応する実際のフォントはUAごとに異なります。

serif

日本語の明朝体に相当します。

sans-serif

日本語のゴシック体に相当します。

cursive

日本語の草書体に相当します。いわゆる筆記体のことです。

fantasy

装飾フォントに相当します。

monospace

等幅フォントに相当します。

inherit

親要素のフォントファミリを継承します。

以下に例を示しておきます。

body { font-famiry: "ＭＳ 明朝","ＭＳ ゴシック",serif }
em   { font-famiry: "ＭＳ ゴシック",sans-serif }

CSS総目次 | ページ先頭に戻る

2.7.3 font-styleプロパティ

「font-styleプロパティ」によって使用するフォントの外観（標準体，斜体など）を指定します。その書式は以下のとおりです。

font-styleプロパティ
値	normal | italic | oblique | inherit
初期値	normal
適用対象	すべての要素
継承	する
パーセント値	受けつけない

normal

標準体のフォントを使用します。

italic

イタリック体(※ 欧文では，イタリック体と斜体を明確に区別しています。日本語では特に区別していない場合が多いようです。)のフォントを使用します。

oblique

斜体のフォントを使用します。

inherit

親要素のスタイルを継承します。

以下に例を示しておきます。

body {
    font-famiry: "ＭＳ 明朝","ＭＳ ゴシック",serif;
    font-style: normal;
}
em {
    font-style: oblique;
}

CSS総目次 | ページ先頭に戻る

2.7.4 font-weightプロパティ

「font-weightプロパティ」によって使用するフォントの太さを指定します。 その書式は以下のとおりです。

font-weightプロパティ
値	normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit
初期値	normal
適用対象	すべての要素
継承	する
パーセント値	受けつけない

100, 200, 300, 400, 500, 600, 700, 800, 900

太さを９段階で表現し，数値が増えるごとに太くなります。(※ 実際に太くなるかどうかは，使用しているフォントによって異なります。また，太くなる場合でも９段階の太さを持たないフォントもあります。)

normal

"400"と同等です。

bold

"700"と同等です。

bolder

より太いフォントを要求します。より太いフォントが存在しない場合，単に，数値を"100"増やすだけです。

lighter

より細いフォントを要求します。より細いフォントが存在しない場合，単に，数値を"100"減らすだけです。

inherit

親要素の太さを継承します。

以下に例を示しておきます。

body {
    font-famiry: "ＭＳ 明朝","ＭＳ ゴシック",serif;
    font-style: normal;
    font-weight: normal;
}
em {
    font-style: oblique;
    font-weight: bolder;
}

CSS総目次 | ページ先頭に戻る

2.7.5 font-sizeプロパティ

「font-sizeプロパティ」によって使用するフォントの大きさを指定します。その書式は以下のとおりです。

font-sizeプロパティ
値	<絶対サイズ> | <相対サイズ> | <長さ> | <％値> | inherit
初期値	medium
適用対象	すべての要素
継承	する
パーセント値	親要素のフォントサイズを参照する

絶対サイズ

UAの持つフォントサイズを参照するための7種類のキーワードが指定できます。そのため具体的なサイズはUAに依存します。

[xx-small | x-small | small | medium | large | x-large | xx-large]

相対サイズ

親要素のフォントサイズに対して，"より小さい"あるいは"より大きい"フォントサイズを意味します。

[larger | smaller]

長さ

em，exなどの単位付き長さを指定します。ただし，負の長さを指定することはできません。

％値

親要素のフォントサイズに対する比率を指定します。

inherit

親要素のフォントサイズを継承する。

以下に例を示しておきます。

body {
    font-famiry: "ＭＳ 明朝","ＭＳ ゴシック",serif;
    font-style: normal;
    font-weight: normal;
    font-size: medium;
}
h1 {
    font-size: 2em;
}
h2 {
    font-size: 150%;
}
h3 {
    font-size: larger;
}

CSS総目次 | ページ先頭に戻る

2.7.6 fontプロパティ

「fontプロパティ」は，これまでの"font-family"，"font-style"，"font-weight"，"font-size"の各プロパティ(※ 実際には，その他に"font-variant"，"line-height"の各プロパティおよび"caption"，"icon"などのキーワードも指定できますが，ここでは割愛します。)を一括で指定するための簡略記法用のプロパティです。 その書式は以下のとおりです。

fontプロパティ
値	[[<'font-style'> || <'font-weight'>]?<'font-size'> <'font-family'>] | inherit
初期値	各プロパティの値を参照する
適用対象	すべての要素
継承	する
パーセント値	'font-size'プロパティで使用可能

以下に例を示しておきます。

body { font: normal normal medium "ＭＳ 明朝","ＭＳ ゴシック",serif; }
h1 { font: 2em "ＭＳ ゴシック",sans-serif; }

CSS総目次 | ページ先頭に戻る