SITEMAP [初めてのホームページ講座] [CSS] [CSS1] [プロパティ一覧] [フォント]

CSS1 Reference

プロパティ

1. フォント


1-1. マッチング

世界中に存在するフォントは多種多様であり、それらを1つの規則に基づき定義することは至難の業です。 例えば、斜体の文字1つとっても、「italic」「Oblique」「Slanted」「Incline」「Cursive」「Kursiv」等が存在し、 一意にこれと言って決められないのが実状です。 そこで、ブラウザは次のようにフォントのマッチング(整合)を採るべきとされています。 HTML文書作成者は、これを意識してフォントの使い分けをするべきと考えます。

  1. ブラウザは認識可能なフォントの全てに対してデータベースを作成、認識する。 これに該当するフォントはローカル・Webは問わず、重複する場合は一方を無視する。
  2. 対象の要素とその要素内の全ての指定されているフォントに対して検索する。 上記のデータベース中から「font-family」に該当する任意の1つを抜き取り、これに対して他のプロパティとのマッチングを行う。 全てが該当すればその選択したフォントファミリが適切なフォントとする。マッチングの規則は以下の通り。
    1. font-style」のマッチングを行う。この値とマッチするフォントの分類を拾い出す。 ただし、値が「italic」の場合のみ、「italic」「oblique」にマッチするフォントを拾い出す。 この時マッチするフォントがなければ失敗とする(以下同様)。
    2. font-variant」のマッチングを行う。この値が「normal」であれば、「small-caps」に分類されたフォント以外にマッチする。 値が「small-caps」の場合は、次の条件にマッチする。
      1. 「small-caps」に分類
      2. 小さい文字を生成可能
      3. 全ての小さい文字に対応する大きい文字が存在(縮小して表示可能)
    3. font-weight」のマッチングを行う。そのフォントファミリ内で一般的に通常とされているものに対する相対尺度でマッチを行うため マッチングに失敗することはない。(詳細はfont-weightにて)
    4. font-size」のマッチングを行う。マッチするフォントサイズが存在しない場合、最も近いサイズにマッチする。
  3. 該当するフォントファミリが存在しない場合、次の代替ファミリが存在すれば上記2を繰り返す。
  4. フォントファミリに該当したものの、要素内のある文字が符号化方式に基づき表示できない場合があるとき、 代替ファミリが存在すれば上記2を繰り返す。
  5. それでも該当するフォントファミリが見つからない場合は、標準のフォントファミリに対して上記2を繰り返し、最善方策を採用する。
[Go To Top]

1-2. font-family

[[<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」が該当)で、以下が使用可能(()内はその事例)

空白を伴うフォントファミリ名の場合、引用符で括るべきとされています。("MS ゴシック"など) 括らなかった場合、空白で値が途切れたとみなされ、正確なフォントファミリ名として認識されない場合があります。

[Go To Top]

1-3. font-style

normal | italic | oblique
初期値
normal
適用要素
全て
継承性
有り
割合指定
無し
SPAN { font-style : italic; }   /*イタリック体に指定*/

通常体、イタリック体オブリーク体のいずれかを選択します。

normal
通常体
italic
イタリック体
oblique
オブリーク体
[Go To Top]

1-4. font-variant

normal | small-caps
初期値
normal
適用要素
全て
継承性
有り
割合指定
無し
SPAN { font-variant : small-caps; }  /*スモールキャピタルフォント*/

フォントファミリの中には通常体の他に小さい文字(スモールキャピタル)が存在します。 日本語にはこの概念は存在しません。

CSS1コア: テキストを大文字にするという効果に限ってこのプロパティを使用するのであれば、同じ効果は「text-transform」で得られます。

normal
通常体
small-caps
スモールキャピタル
[Go To Top]

1-5. font-weight

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」とし、次の方法で各数値への割り当てを行います。 ここでは、指定した値とその太さの関係が逆転することはない、とだけしか規定できません。

上記の方法に基づいて、下記に例を示します。(よ〜く、上の方法と下の例を照らし合わせて下さい)

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 無し  
[Go To Top]

1-6. font-size

<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」指定の時は、フォントサイズの場合に限って、親要素のフォントサイズに対する相対値で表示します。 当然、指定する値が負になってはいけません。

[Go To Top]

1-7. font

[ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family>
初期値
各プロパティ参照
適用要素
全て
継承性
有り(各プロパティ参照)
割合指定
<font-size>,<line-height>のみ
P{   font : normal 12pt/120%; }
     /*スタイルが通常体、太字、サイズを12pt、行間120%*/
DIV{ font : 900 large "MS ゴシック",Osaka,sans-serif; }
     /*太さ900、サイズlarge、ファミリを左から優先に指定*/

当プロパティは、フォント系のプロパティを同時に指定できるもので、例のように指定したいプロパティのみを指定することも可能で、省略したプロパティは初期値が用いられます。 ただし、1つ目の例(P要素)で最初に「normal」と指定していますが、これは「<font-style>」 「<font-variant>」「<font-weight>」に適用されます。 各プロパティの値は各々の説明を参照して下さい。

[Go To Top]

Last modified Apr,2002
Copyright(C)1999 Miyazaki , All Rights Reserved.