font attribute

ここではフォントに関する指定の色々を説明します。フォントの属性として Style Sheet で指定できるのは以下の要素です。

 
Font Size フォントのサイズを pt/in/cm/px のどれかを単位にして指定できます。
Font Family フォント名を指定できます。
Font Weight フォントの太さを指定できます。
Font Style フォントのスタイル(イタリックなど)を指定できます。
Font Variant まだ InternetExplorer でもサポートされていないので省略
 

また(個人的に)待望の行間 (Line Height) の設定も出来ます。
これらをまとめて指示する方法 (Grouping Font Attributes) もありますが、とりあえずそれぞれ一つずつ見ていきます。


Font Size

フォントサイズを指定します。指定方法は point(pt) / inches(in) / centimeters(cm) / pixels(px) と現在のフォントサイズに対する割合い(%)です。

 
points <SPAN STYLE="font-size:20pt">points</SPAN>
inches <SPAN STYLE="font-size:0.3in">inches</SPAN>
centimeter <SPAN STYLE="font-size:0.7cm">centimeter</SPAN>
pixels <SPAN STYLE="font-size:30px">pixels</SPAN>
percentage <SPAN STYLE="font-size:150%">percentage</SPAN>

Font Family

使用するフォント名を記述します。
フォント名を一つ書けば良いのですが、そのドキュメントをブラウズした人のところに、そのフォントが無かったら困るので、複数似たようなフォント名を列挙して、どれかのフォントで表示させるということができます。

 
Arial <SPAN STYLE="font-family: arial">
Arial</SPAN>
Helvetica <SPAN STYLE="font-family: helvetica, arial">
Helvetica</SPAN>
 
二番目の例のようにフォント名をカンマで区切って列挙しておくと、まず Helvetica を探しますが標準の Windows95 には無いので、次に Arial を探して普通は Windows にはあるので Arial で表示されます。Helvetica を持っている場合はそれで表示されます。

では将来 Windows / Mac / UNIX などすべてのプラットフォームのブラウザで、スタイルシートがサポートされた場合、ありとあらゆるプラットフォーム用のフォント名を記述しなけりゃならないのかぁ? と思うかもしれないが、そうはならないように一般的なフォント名が決まってます(誰でもそう思うわな)。
それを Generic Family Names と呼び、以下の五種類があります。
 
serif <SPAN STYLE="font-family: serif">
serif</SPAN>
sans-serif <SPAN STYLE="font-family: sans-serif">
sans-serif</SPAN>
cursive <SPAN STYLE="font-family: cursive">
cursive</SPAN>
fantasy <SPAN STYLE="font-family: fantasy">
fantasy</SPAN>
monospace <SPAN STYLE="font-family: monospace">
monospace</SPAN>
 
これらの Generic Family Name が何のフォントに相当するかはシステム依存ですが、必ず何らかの当たらずとも遠からずなフォントに割り当てられているので、フォント名を列挙したら、最後に Generic Family Name を付けておくと安心です。

Font Weight

フォントの太さを指定できます。
指定には様々な値・文字列が W3C のドキュメントには定義されていますが、Internet Explorer で受け取ることが出来るのは、extra-light / light / demi-light / medium / demi-bold / bold / extra-bold の七種類です。でも普通の Windows マシンでは一つのフォントに付き四種類だけインストールしてあることが普通なので、ここでは bold だけを採り上げます。

 
normal <SPAN STYLE="font-weight: normal">
normal</SPAN>
bold <SPAN STYLE="font-weight: bold">
bold</SPAN>

Font Style

フォントのスタイルを指定します。
W3C のドキュメントでは色々指定できるように書いてありますが、InternetExplorer では、italic のみです。上の Weight と組み合わせて italic-bold を指定します。

 
italic <SPAN STYLE="font-style:italic">
italic</SPAN>
italic-bold <SPAN STYLE="font-style:italic; font-weight:bold">
italic-bold</SPAN>

Line Height

行間の設定が出来ます。TeX でいうところの \baselineskip ですね。
指定方法は font-size で使われた方法、つまり pt / in / cm / px / % が全て使えます。 今までの HTML では日本語の表示がギッチリ詰まっているような感じがしたので、これで見やすい日本語ページが増えることでしょう。

 

ここの段落は行送りを 150% にしてあります。これなら早稲田大学大学院理工学研究科情報科学専攻上田研究室所属って漢字が並んでも圧迫感は無いでしょ?

<P STYLE="line-height:150%">
ここの段落は行送りを 150% にしてあります。これなら早稲田大学大学院理工学研究科情報科学専攻上田研究室所属って漢字が並んでも圧迫感は無いでしょ?
</P>

Grouping Font Attributes

これまでに説明したフォントの属性をいちいち各タグに付けることは面倒なので、略記する方法があります。次のような <P>タグのスタイルの指定は、その下のように簡潔に書くことが出来ます。どちらも同じ意味です。

 
P {font-family: arial, sans-serif;
   font-size: 20pt;
   line-height: 150%;
   font-weight: bold;
   font-style: italic
}
P {font: bold italic 20pt/150% arial, sans-serif}

この省略形では、要素の順番がこの順番でないと処理されません。必ず、

	 Weight Style Size / LineHeight Families
と並べてください。ただし途中の指定しなくてもいい要素を飛ばしてしまうことは出来ます。