CSS1 Reference
プロパティ
1. フォント
- 1-1.マッチング
- 1-2.font-family (種類)
- 1-3.font-style (スタイル)
- 1-4.font-variant (スモールキャピタル)
- 1-5.font-weight (太さ)
- 1-6.font-size (サイズ)
- 1-7.font(フォント全般)
世界中に存在するフォントは多種多様であり、それらを1つの規則に基づき定義することは至難の業です。
例えば、斜体の文字1つとっても、「italic」「Oblique」「Slanted」「Incline」「Cursive」「Kursiv」等が存在し、
一意にこれと言って決められないのが実状です。
そこで、ブラウザは次のようにフォントのマッチング(整合)を採るべきとされています。
HTML文書作成者は、これを意識してフォントの使い分けをするべきと考えます。
- ブラウザは認識可能なフォントの全てに対してデータベースを作成、認識する。
これに該当するフォントはローカル・Webは問わず、重複する場合は一方を無視する。
- 対象の要素とその要素内の全ての指定されているフォントに対して検索する。
上記のデータベース中から「font-family」に該当する任意の1つを抜き取り、これに対して他のプロパティとのマッチングを行う。
全てが該当すればその選択したフォントファミリが適切なフォントとする。マッチングの規則は以下の通り。
- 「font-style」のマッチングを行う。この値とマッチするフォントの分類を拾い出す。
ただし、値が「italic」の場合のみ、「italic」「oblique」にマッチするフォントを拾い出す。
この時マッチするフォントがなければ失敗とする(以下同様)。
- 「font-variant」のマッチングを行う。この値が「normal」であれば、「small-caps」に分類されたフォント以外にマッチする。
値が「small-caps」の場合は、次の条件にマッチする。
- 「small-caps」に分類
- 小さい文字を生成可能
- 全ての小さい文字に対応する大きい文字が存在(縮小して表示可能)
- 「font-weight」のマッチングを行う。そのフォントファミリ内で一般的に通常とされているものに対する相対尺度でマッチを行うため
マッチングに失敗することはない。(詳細はfont-weightにて)
- 「font-size」のマッチングを行う。マッチするフォントサイズが存在しない場合、最も近いサイズにマッチする。
- 該当するフォントファミリが存在しない場合、次の代替ファミリが存在すれば上記2を繰り返す。
- フォントファミリに該当したものの、要素内のある文字が符号化方式に基づき表示できない場合があるとき、
代替ファミリが存在すれば上記2を繰り返す。
- それでも該当するフォントファミリが見つからない場合は、標準のフォントファミリに対して上記2を繰り返し、最善方策を採用する。
- 値
- [[<family-name> | <generic-family>],]*
[<family-name> | <generic-family>]
- 初期値
- ブラウザ標準
- 適用要素
- 全て
- 継承性
- 有り
- 割合指定
- 無し
BODY { font-family : "MS ゴシック",Osaka,sans-serif; } /*ファミリを左から順に優先的に*/
値には優先して用いるフォントファミリ名、総称ファミリ名を指定します。
ユーザーの環境下で表示不能な場合は順次優先度を落として表示しようとしますので、複数指定することでスタイルの安全性を高めることが可能です。
通常1つでは、全ての環境には対応できません(日本語に限ってもWindows、Mac、UNIXでは異なる)。
最善の方策として、最後の選択肢に総称ファミリ名を指定しおけば、最終的には該当するファミリが存在する可能性が高い。
また、値を複数指定する場合は他のプロパティと異なり「,」(カンマ)で区切ります。
- family-name
- フォントファミリ名(例では「MS ゴシック」「Osaka」が該当)
- generic-family
- 総称ファミリ名(例では「sans-serif」が該当)で、以下が使用可能(()内はその事例)
- serif (ABC)
- sans-serif (ABC)
- cursive (ABC)
- fantasy (ABC)
- monospace (ABC)
空白を伴うフォントファミリ名の場合、引用符で括るべきとされています。("MS ゴシック"など)
括らなかった場合、空白で値が途切れたとみなされ、正確なフォントファミリ名として認識されない場合があります。
- 値
- normal | small-caps
- 初期値
- normal
- 適用要素
- 全て
- 継承性
- 有り
- 割合指定
- 無し
SPAN { font-variant : small-caps; } /*スモールキャピタルフォント*/
フォントファミリの中には通常体の他に小さい文字(スモールキャピタル)が存在します。
日本語にはこの概念は存在しません。
CSS1コア: テキストを大文字にするという効果に限ってこのプロパティを使用するのであれば、同じ効果は「text-transform」で得られます。
- normal
- 通常体
- small-caps
- スモールキャピタル
- 値
- normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
- 初期値
- normal
- 適用要素
- 全て
- 継承性
- 有り(値ではなくそのフォントの太さを継承)
- 割合指定
- 無し
EM { font-weight : bold; } /*太字*/
STRONG { font-weight : 900; } /*900に該当する太さ*/
フォントの太さを指定します。文字列による指定と数値による指定の2種類があり、「normal」=「400」、「bold」=「700」です。
また、「bolder」「lighter」は親要素からの相対表示を示し、数値は大きいほど太くなります。具体的には、次の通りです。
- normal
- 「400」と等価
- bold
- 「700」と等価
- bolder
- 継承したフォントに対して太い側に最も近い太いフォントを割り当てます。
該当するフォントがなければ数値を一段階だけ大きくします(「900」の時は変更しない)。
この結果、太くなるかどうかはフォント次第です。
- lighter
- 継承したフォントに対して細い側に最も近い細いフォントを割り当てます。
該当するフォントがなければ数値を一段階だけ小さくします(「100」の時は変更しない)。
この結果、細くなるかどうかはフォント次第です。
通常、フォントの太さはフォントファミリに依存し、その太さは客観的に一律ではありません。
(あるフォントのボールド体の太さがあるフォントの普通の太さであったりする)
そこで、そのファミリの通常の太さとされるものを「400」とし、次の方法で各数値への割り当てを行います。
ここでは、指定した値とその太さの関係が逆転することはない、とだけしか規定できません。
- 9段階の太さを持つファミリはそのまま割り当て
- ファミリ内にMediumとされるフォントが存在し、更にBook、Regular、Roman、Normalの何れかに該当するフォントが存在する場合、Mediumを「500」に割り当て
- 「bold」のフォントは「700」に割り当て
- 上記に該当しない場合は次のように割り当て
- 「500」に割り当てが無い場合、「400」と同じものを割り当て
- 「600」〜「900」に割り当てがない場合、次に太いフォントを割り当て(それでもなければ細いフォントを割り当て)
- 「100」〜「300」に割り当てがない場合、次に細いフォントを割り当て(それでもなければ太いフォントを割り当て)
上記の方法に基づいて、下記に例を示します。(よ〜く、上の方法と下の例を照らし合わせて下さい)
Example1 |
フォント | 割り当て値 | 補完される値 |
Example1 Regular | 400 | 100,200,300 |
Example1 Medium | 500 | |
Example1 Bold | 700 | 600 |
Example1 Heavy | 800 | 900 |
Example2 |
フォント | 割り当て値 | 補完される値 |
Example2 Book | 400 | 100,200,300 |
Example2 Medium | 500 | |
Example2 Bold | 700 | 600 |
Example2 Heavy | 800 | |
Example2 Black | 900 | |
Example2 ExtraBlack | 無し | |
- 値
- <absolute-size> | <relative-size>
| <length> | <percentage>
- 初期値
- medium
- 適用要素
- 全て
- 継承性
- 有り(値ではなく親要素フォントサイズを継承)
- 割合指定
- 親要素に対する相対値
P { font-size : 12pt; } /*フォントサイズを12pt*/
EM { font-size : large; } /*(相対的に)大きめのフォント*/
STRONG { font-size : 120%; } /*親要素フォントの120%の大きさに近いフォント*/
SAMP { font-size : 0.8em; } /*親要素フォントの0.8倍の大きさに近いフォント*/
- <absolute-size>
- ブラウザが計算したフォントサイズ対照表への指標で、以下のものが指定可能です。
- xx-small
- x-small
- small
- medium
- large
- x-large
- xx-large
これらの相対的な大きさは、小さいフォントに対して大きいフォントは1.5倍が推奨されています。
例えば、「medium」が「10pt」(一般的にブラウザをユーザーが設定した値)とすると、「large」は「15pt」となります。
ただし、フォントファミリによっては推奨のフォントサイズが存在しない場合もあり、その時々に応じてブラウザが対処します。
- <relative-size>
- 親要素のフォントサイズに対するフォントサイズ対照表の元の相対的な大きさで、以下のものが指定可能です。
- smaller (1段階小さく)
- larger (1段階大きく)
例えば親要素が「small」であり、「larger」が指定されていたならば、フォントサイズは「medium」となります。
親要素のサイズがフォントサイズ対照表に無くても、ブラウザは何らかの方法で対応をとるべきとされています。
大きさそのものの指定(10ptなど)や割合指定の場合、フォントサイズ対照表を参照せず、純粋に表示しようとします。
また「em」「ex」指定の時は、フォントサイズの場合に限って、親要素のフォントサイズに対する相対値で表示します。
当然、指定する値が負になってはいけません。
Last modified Apr,2002
Copyright(C)1999 Miyazaki , All Rights Reserved.