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; }