ばけらの CSSリファレンス

使用するフォントを指定します。具体的なフォント名を示す文字列か、あるいは 一般フォント名(generic-family)を示すキーワードを指定します。カンマで区切って複数を指定することも出来、その場合は前から順番にマッチングされます。

一般フォント名には以下の五つがあります。

• serif …… 明朝体などのひげ付きフォント。

• sans-serif …… ゴシック体などのひげ無しフォント。

• cursive …… 筆記体、続け字のフォント。行書体に近い。

• fantasy …… 飾り文字のフォント。

• monospace …… 等幅フォント。

例を示しましょう。

 H1 {font-family: へた字, ＤＦＰまるもじ体, "ＭＳ Ｐゴシック", sans-serif;}

この場合、「へた字」がインストールされている環境ならへた字で表示、へた字がなければ「ＤＦＰまるもじ体」、それもなければ「ＭＳ Ｐゴシック」、いずれもなければゴシック系のフォントで表示します。"ＭＳ Ｐゴシック" のように空白を含む文字列は引用符で囲んでください。空白を含まない名前でも引用符で囲って構いませんが、sans-serif などのキーワードに引用符をつけてはいけません。

また、指定されたフォントに字形がない場合も、他のフォントを当たります。たとえば、

 P { font-family: "Bradley Hand ITC", ＤＦＰ行書体, cursive;}

こんな指定が日本語の文書に適用されたとします。基本は「Bradley Hand ITC」ですが、これは欧文フォントですから漢字や平仮名がありません。従って、漢字部分だけ「ＤＦＰ行書体」になったりします。……するはずですが、ブラウザがこれをきちんと実装できているか否かは保証の限りではありません。

普通のフォントを使うのか、イタリックや斜体のフォントを使うのかを指定します。概ね以下のようになっています。

• normal …… 普通のフォントを使う。

• oblique …… 斜体のフォントを使う。斜体用のフォントが用意されていなければ、普通のフォントをむりやり傾けて代用する。

• italic …… イタリック体のフォントを使う。イタリック体用のフォントがない場合は、斜体用のフォントで代用する。それもなければ普通のフォントをむりやり傾ける。

たとえば、

 EM { font-style: oblique;}
 STRONG { font-style: italic;}

とすると、EM が斜体のフォント、STRONG がイタリック体のフォントで表現されることになります。ただし現実には、両者は同じになってしまうことが多いようです。特に、日本語のフォントに斜体用のものが用意されていることは殆どないでしょう。

和文で italic や oblique を使うと、専用のフォントではなく適当に傾けただけのものが使われる事になって、文字がつぶれたりして読みにくくなるかも知れません。

スモールキャピタルの指定が出来ます。font-variant: small-caps を指定すると、小文字が小さめの大文字に変換されます。これは英文雑誌の見出しなどによく使われるスタイルです。

単に小文字を大文字に変換するのであれば、text-transform を使います。

font-weight プロパティは、フォントの太さを指定します。

まず絶対指定の方法ですが、数値で指定する場合、100, 200, 300, 400, 500, 600, 700, 800, 900 の 9種類の指定が出来ます。数値が大きいほど太いフォントを指定することになります。キーワードで指定する場合、normal は 400, bold は 700 と同じです。

bolder, lighter のキーワードは、親要素の font-weight に対する相対指定です。それぞれ一段階太い、一段階細いフォントの指定になります。ただし、100 より細くはなりませんし、900 より太くもなりません。

font-stretch プロパティは、フォントの字幅を指定します。ultra-condensed が最も狭く、ultra-expanded が最も広くなります。wider, narrower はそれぞれ一段階広い字幅、狭い字幅を指定します。ただし、ultra-condensed より狭くはなりませんし、ultra-expanded より広くもなりません。

font-size プロパティはフォントのサイズを指定します。以下のような指定の方法があります。

1. 絶対サイズ指定

   小さい方から、xx-small, x-small, small, medium, large, x-large, xx-large の 7 種のキーワードで指定します。CSS2 では、一段階でフォントサイズが 1.2倍となるような実装を推奨しています。たとえば、medium が 10pt なら large は 12pt, x-large は 14.4pt, といった具合です。CSS1 ではこの値は 1.5倍でしたが、CSS2 で見直されました。

2. 相対サイズ指定

   larger あるいは smaller を指定すると、親要素に対して一段階大きい、あるいは小さいフォントを指定することになります。たとえば、親要素のフォントサイズが small であるとき、font-size: smaller を指定された子要素のフォントサイズは、x-small となります。親の指定がどれにも当てはまらないようなとき、この指定をどのように解釈するかは UA に依存します。xx-large よりもさらに大きいフォントになることもあり得ます。

3. 長さ指定

   長さでフォントサイズを指定します。負の値は指定できません。

4. パーセント値で指定

   親のフォントサイズに対するパーセンテージで指定します。90%, 120% などの値を指定できます。

いずれの場合も、ブラウザの側に対応するフォントがない場合、近いサイズのフォントで代用されます。指定が 13pt なのに 13pt のフォントがない場合、14pt のフォントが使われるかも知れません。なお、代用が行われた場合でも、子要素は実効値ではなく算出値を継承します。たとえば、このケースで子要素に font-size: 2em; が指定されていると、子要素のフォントサイズは 28pt ではなく 26pt になります。

10pt, 20px, などの固定サイズで絶対指定してしまうと、UA によってはフォントサイズを変えられなくなったりするので注意が必要です。ユーザースタイルシートで絶対指定するのは問題ありませんが、ページ作者が絶対指定を行うのは避けるべきでしょう。パーセント値や em での指定が推奨されますが、IE3 が em を px と解釈するという壮絶な実装をしていることを考えると、パーセント値の使用がお勧めです。

font-size-adjust プロパティは、フォントの縦幅比を調整します。特に欧文のフォントでは、フォントによって横幅に対する縦幅の比率が大きく違っていたりしますので、同じ font-size でも、フォントによって大きさが違って見えることがよくあります。

サイズ調整を行う場合は、font-size-adjust にフォントセットの最初のフォントの縦幅比を指定します。最初のフォントが存在せず別のフォントが用いられるとき、この縦幅比に応じてフォントサイズが調整されます。

CSS2 には、以下のような例が出てきます。

For example, if 14px Verdana (with an aspect value of 0.58) was unavailable and an available font had an aspect value of 0.46, the font-size of the substitute would be 14 * (0.58/0.46) = 17.65px.

たとえば、

p{
 font-size: 14px;
 font-family: Verdana, "Times New Roman";
 font-size-adjust: 0.58;
}

と指定されていて、Verdana の縦幅比が 0.58, Times New Roman の縦幅比が 0.46 だとします。このとき、Verdana が使える環境では 14px の Verdana がそのまま使われますが、Verdana がなく Times New Roman が使える環境では、14 * (0.58/0.46) = 17.65px の Times New Roman が使われることになります。もちろん 17.65px という半端な数字は算出値ですから、実際にはこれに近い実効値(たとえば18px)が使われます。

調整を行わないときは、キーワード none を指定します。日本語のフォントでこの調整を行う必要はあまりないでしょう。

CSS2 において、font プロパティには大きく分けて二つの用法があります。

第一の用法は、CSS1 の font プロパティと同様、簡略化プロパティとしての用法です。font プロパティを使って、font-style, font-variant, font-weight, font-size, line-height, font-family の値を一括指定することが出来ます。

指定法は、font-style font-variant font-weight(この三つは順序問わず、省略可) font-size(省略不可) /line-height(省略可) font-family(省略不可) となります。font-size, font-family の順に指定するのが基本で、font-style font-variant font-weight を指定する際は頭に、line-height を指定する際は / をつけて font-size の後ろに、と覚えると良いでしょう。

例を示します。

p { font: 100% serif; }
strong { font: bolder 1.2em/1.2em sans-serif; }
em { font: large/110% "ＭＳ ゴシック", sans-serif; }
cite{ font: bold italic large Arial, serif; }
h1{ font: oblique 2em "Helvetica Nue", serif; }
h2{ font: midium normal small-caps 120%/120% cursive; }

font-size と font-family の値が省略できないことに注意してください。

なお、このプロパティは font-stretch や font-size-adjust の値を指定できません(これは CSS1 との互換性のためです)。しかしながら、font プロパティはこれらの値を設定する効果を持ちます。すなわち、font プロパティを使った時点で、font-stretch と font-size-adjust の値は初期値にリセットされることになります。これらの値を設定する際は、font プロパティを設定した後で font-stretch などを個別に指定する必要があります。

font プロパティの第二の用法は、システムフォントの指定です。これは CSS2 で定められたもので、CSS2 には以下の 6 種の指定が可能です。

1. caption …… コントロールのキャプションに使っているフォント。たとえばボタンの名前など。

2. icon …… アイコンのラベルに使っているフォント。

3. menu …… アプリケーションのメニューなどに使っているフォント。

4. message-box …… ダイアログボックス(メッセージボックス)で用いているフォント。

5. small-caption …… 小さなウィンドウの細いタイトルバーなどに使われるフォント(Windows の設定項目では「パレットタイトル」がこれに該当するようです)。

6. status-bar …… ステータスバーで使っているフォント。

たとえば、

caption { font: caption; }
span.description { font: icon; }

などとすると、それぞれにユーザが指定したシステムフォントが使われます。たとえば Windows では、コントロールパネルの [画面] - [デザイン] で各種のフォントを指定することが出来ます。

この用法と第一の用法とを併用することは出来ません。システムフォントの指定をする際は、システムフォントの名称だけを指定してください。フォントはシステムフォントを使うけれども文字の大きさだけは変えたい、と言うような場合は、font プロパティを指定した後で font-size を指定することになります。