7. フォント

ここでは、フォントに関連する主なプロパティについて説明する。

フォント関連の用語

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

字体
字体」とは、ある文字を他の文字と区別するための抽象的な概念である。 例えば、「十」という文字は縦線と横線が交わった形、「口」は四角などで表現される。
字形(グリフ)
字形」とは、抽象的な字体を書き表す場合に実際に描かれる具体的な形のことである。
書体(タイプフェイス)
同じ字体であっても字形が異なる場合があります。例えば、明朝とかゴシックと呼ばれるもので字形は異なります。 このような筆法や意匠などの統一された字形を与えたものを「書体」という。
フォント
フォント」とは、同じ書体、大きさ、外観(太字、斜め字など)の字形の集合のことである。
フォントファミリ
フォントファミリ」とは、デザイン(書体、大きさ、外観など)の一貫性を保つためのフォントの集合のことである。 例えば、「明朝体」のフォントファミリには、標準のフォント以外に、太字や斜め字の個別のフォントを持っている。

font-familyプロパティ

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

font-familyプロパティ
[[フォントファミリ名 | 一般ファミリ名], ]* [フォントファミリ名 | 一般ファミリ名] | inherit
初期値UAに依存
適用対象すべての要素
継承する
パーセント値受けつけない
フォントファミリ名
使用するフォントファミリ名(※ "Symbol"や"MS 明朝"など)を指定する。 このファミリ名は「カンマで区切って複数指定が可能」である。該当するフォントファミリが利用者側に存在しない場合、 指定された順序で該当するフォントファミリを探す。 また、空白を含むファミリ名を指定する場合は、引用符で囲む必要がある。
一般ファミリ名
指定されたフォントファミリが、すべて利用者側に存在しない場合、 一般ファミリ名を使用する。この一般ファミリ名は、キーワードとして提供されており、つぎのものが指定できる。 なお、一般ファミリ名に対応する実際のファミリ名はUAごとに異なる。
serif
日本語の明朝体に相当する。
sans-serif
日本語のゴシック体に相当する。
cursive
日本語の草書体に相当する。
fantasy
装飾フォントに相当する。
monospace
等幅フォントに相当する。
inherit
親要素のフォントファミリを継承する。

以下に例を示しておく。

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

font-styleプロパティ

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

font-styleプロパティ
normal | italic | oblique | inherit
初期値normal
適用対象すべての要素
継承する
パーセント値受けつけない
normal
標準体のフォントを使用する。
italic
イタリック体(※ 欧文では、イタリック体と斜体を明確に区別している。日本語では特に区別していない場合が多い。)のフォントを使用する。
oblique
斜体のフォントを使用する。
inherit
親要素のスタイルを継承する。

以下に例を示しておく。

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

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
太さを9段階で表現し、数値が増えるごとに太くなる。(※ 実際に太くなるかどうかは、使用しているフォントによって異なる。また、太くなる場合でも9段階の太さを持たないフォントもある。)
normal
"400"と同等である。
bold
"700"と同等である。
bolder
より太いフォントを要求する。より太いフォントが存在しない場合、単に、数値を"100"増やすだけである。
lighter
より細いフォントを要求する。より細いフォントが存在しない場合、単に、数値を"100"減らすだけである。
inherit
親要素の太さを継承する。

以下に例を示しておく。

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

font-sizeプロパティ

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

font-sizeプロパティ
<絶対サイズ> | <相対サイズ> | <長さ> | <%値> | inherit
初期値medium
適用対象すべての要素
継承する
パーセント値親要素のフォントサイズを参照する
絶対サイズ
UAの持つフォントサイズを参照するための7種類のキーワードがある。
[xx-small | x-small | small | medium | large | x-large | xx-large]
相対サイズ
親要素のフォントサイズに対して、"より小さい"あるいは"より大きい"フォントサイズを意味する。
[larger | smaller]
長さ
em、exなどの単位付き長さを指定する。ただし、負の長さを指定することはできない。
%値
親要素のフォントサイズに対する比率を指定する。
inherit
親要素のフォントサイズを継承する。

以下に例を示しておく。

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

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 "MS 明朝","MS ゴシック",serif; }
h1 { font: 2em "MS ゴシック",sans-serif; }

ページの先頭に戻る


Copyright c 2006-2007 御隠居 (滄洲). All Rights Reserved.