フォント

Revised: Jun./20th/2004

フォントの概念

フォントとは、テキストを表示する文字の形（グリフ）の集合です。一般的な区分けでは、ゴシック体、明朝体などがありますが、その他にも、大きさ、太さ、斜体などの特性があります。同じデザイン系統に含まれる複数のフォントの集合を、フォント・ファミリーと呼びます。

CSS2 では、フォント関連のプロパティとして、つぎのものが挙げられます。

'font-family'

フォントのデザインの種類を意味します。

'font-style'

通常体、イタリック体、斜体を区別して指定します。

'font-variant'

英数文字の場合に、小文字／Small Caps を区別して指定します。

'font-weight'

フォントの太さを指定します。

'font-stretch'

レンダリングするフォントの形の幅を指定します。

'font-size'

フォントの大きさを指定します。フォントの大文字と小文字の比率に基づく 'font-size-adjust' も同時に指定できます。

これらのプロパティは、'font-stretch' と 'font-size-adjust' を除いたものは、省略プロパティ 'font' で、一括指定が可能です。

※ 'font-stretch' と 'font-size-adjust' は、CSS2.1 では存在しません。

font-family

プロパティ 'font-family' は、セレクタにマッチした対象のフォント・ファミリーを指定します。フォントファミリーに複数のフォントが含まれる場合は、他のフォント関連のプロパティの指定に依存して、採用されるフォントが決定します。

'font-family' は子要素に継承されます。デフォルトの値は、ユーザエージェントに依存します。inherit は、親要素の値を明示的に継承する指定です。

複数のフォントファミリーを指定する場合は、カンマ区切りのリストで指定します。

<family-name>

フォントファミリーを指定します。空白類文字が含まれる場合は、引用符で括る必要があります。個別のフォントファミリー名を指定することができますが、一般フォントファミリー (generic font family) と呼ばれるキーワードで指定することもできます。

<generic-family>

五つの一般フォントファミリ名が指定できます： 'serif', 'sans-serif', 'cursive', 'fantasy', 'monospace'。これらの一般フォントファミリ名はキーワードであり、引用符で括ることはできません。

<family-name>

CSS では、複数のフォントを、優先順位をつけたカンマ区切りのリストで指定できます。

次の例の場合は、英数文字は "Georgia" でレンダリングされ、"Georgia" に存在しない文字は、"ＭＳ 明朝" でレンダリングされるはずです。

p { font-family: Gergia, "ＭＳ 明朝"; }

閲覧しているコンピュータに、何れのフォントも実装（インストール）されていない場合は、ブラウザに標準として登録されているフォントが使われます。デザインを詳細に指定する場合にフォントを指定するには、画像にするのが一般的です。

<generic-family>

CSS では、次の五つの一般ファミリ名をキーワードとして定義しています。これらは、デザイン系統で分類したもので、製作者が指定した <font-family> が何れも利用できない場合、最後に採用される、最悪の場合のフォールバック機能として提供されます。

各々の一般ファミリ名に、ブラウザがどのフォントを関連付けているかは知るすべがありませんし、全てが異なるフォントに関連づいている保障もありませんが、個別のフォント名を指定するよりも、意図したデザインに近く表示される可能性が高まります。

'font-fmaily' の値のリストの最後には、指定した全てのフォントが利用できない場合に備えて、一般フォントファミリを指定するように推奨されます。

次の例の場合は、"Georgia" と "ＭＳ 明朝" の両方とも利用可能でない場合は、serif に関連付けられたフォントが使われます。通常は、明朝体系統のフォントが関連付けられていると期待できます。

p { font-family: Gergia, "ＭＳ 明朝", serif; }

フォントの表示例

serif

ひげ付きの文字で、跳ね、払いがあり、線に強弱を持ちます。印刷物は、serif が読みやすいとされます。

sans-serif

ひげなしの文字で、跳ね、払いがなく、線に強弱がありません。太字／細字の区別が付きやすく、モニターでは、sans-serif が読みやすいとされます。

cursive

手書き風の文字で、筆記体を含みます。

fantasy

装飾が主となるフォントです。

monospace

全てのグリフが同じ幅を持ち、タイプライター体とも呼ばれます。monospace でない、グリフごとに幅が異なるフォントを、プロポーショナルフォントと呼びます。自然言語の英文はプロポーショナルフォントが読みやすいとされます。

コンピュータコードや SYSLOG のメッセージなどは monospace でないと、読みづらいことがあります。日本語の文章も monospace が読みやすいとされます。

font-style

プロパティ 'font-style' は、セレクタにマッチした対象のフォント・ファミリーの、普通(normal)／イタリック(italic)／斜体(oblique)の区別を指定します。

'font-style' は子要素に継承されます。デフォルトの値は、normal です。inherit は、親要素の値を明示的に継承する指定です。

フォントファミリーに、イタリックやオブリークが存在すれば、該当するフォントが使われます。イタリックは、斜体よりも続け書き風だとされます。いずれも存在しない場合は、標準フォントを傾けただけのものが使われます。

font-variant

プロパティ 'font-variant' は、セレクタにマッチした対象のフォント・ファミリーの、小文字(normal)／スモールキャプス(small-caps)の区別を指定します。

'font-variant' は子要素に継承されます。デフォルトの値は、normal です。inherit は、親要素の値を明示的に継承する指定です。

値に small-caps を指定する場合、フォントファミリーに、スモールキャプスフォントが存在すれば、該当するフォントが使われます。存在しない場合は、通常の大文字を使ったり、大文字を小文字の高さにして表示します。

address { font-variant: small-caps }

font-weight

プロパティ 'font-weight' は、そこで使われているフォントの、グリフの線の太さを指定します。

'font-weight' は子要素に継承されます。デフォルトの値は、normal です。inherit は、親要素の値を明示的に継承する指定です。

数値で指定する場合は、100-900 の範囲内で 100 飛びで指定し、数字が大きい方が太くなります。normal が 400 と同じで、bold は 700 と同じです。bolder は、継承した値と同じかそれよりも太く、lighter は、継承した値と同じかそれよりも細くなります。

strong { font-weight: bolder }

font-stretch

プロパティ 'font-stretch' は、そこで使われているフォントの、グリフの幅を指定します。

'font-stretch' は子要素に継承されます。デフォルトの値は、normal です。inherit は、親要素の値を明示的に継承する指定です。

文字の幅の狭い順に並べると、次のようになります。

1. ultra-condensed
2. extra-condensed
3. condensed
4. semi-condensed
5. normal
6. semi-expanded
7. expanded
8. extra-expanded
9. ultra-expanded

wider/narrower の場合は、継承した値と同じかそれよりも広く／狭くなります。

h2 { font-stretch: extra-expanded }

この指定が有効になるブラウザ、ユーザエージェントは、存在しないものと思われます。

font-size

プロパティ 'font-size' は、そこで使われているフォントの大きさを指定します。

'font-size' は子要素に継承されます。デフォルトの値は、medium です。inherit は、親要素の値を明示的に継承する指定です。

<absolute-size>

キーワード指定でユーザエージェント依存のフォントサイズを指定します。とりうる値は、次の 7 種類で、CSS2 では 1.2 倍ずつ大きくなります：[ xx-small | x-small | small | medium | large | x-large | xx-large ]

<relative- size>

無指定の値よりも大きい／小さいを指定できます：[ larger | smaller ]

<length>

正数で長さを指定できます。指定できる単位は、別項で説明しています。負の数は不正です。

<percentage>

継承したフォントのサイズを 100% として計算します。120% は 1.2em と等価です。負の数は不正です。

h1 { font-size: xx-large }
h2 { font-size: x-large }
h3 { font-size: large }
h4,h5,h6 { font-size: medium }
strong { font-size: larger }
li { font-size: .9em  }
th,dt { font-size: 110% }

一般的には、フォントのサイズは、キーワード指定、em 単位指定、% 指定の何れかが好まれます。ブラウザの設定で文字の大きさを簡単に変更できるため、アクセシビリティの観点で好ましいからです。その反面、デザインを固定できないというデメリットもあります。

きめ細かいデザインの指定には、px 単位が便利ですが、ブラウザで文字の大きさを変更できないというデメリットもあります。ただし、十分大きなサイズを指定しておけば、デザインが固定できるので、結果として読みやすくなることも考えられます。

絶対単位（pt, in など）は、ウェブページに使うメリットが殆どありません。出力メディアが特定できる場合を除いては、使うべきではないといえます。

font-size-adjust

プロパティ 'font-size-adjust' は、そこで使われているフォントのアスペクト値を指定します。アスペクト値とは、大文字と小文字の高さの比率を意味します。

'font-size-adjust' は子要素に継承されます。デフォルトの値は、'font-size' だけでフォントの大きさを指定する none です。inherit は、親要素の値を明示的に継承する指定です。

<number> は、利用可能なフォントに適用するアスペクト値を数値で指定します。最初に指定されたフォントの 'font-size' の値を y、最初に指定されたフォントのアスペクト値を a、実際に利用可能なフォントのアスペクト値（'font-size-adjust' の値）を a'、利用可能なフォントのフォントサイズを c とすると、c は次の式で算出されます：

y(a/a') = c
  where:
    y = 'font-size' of first-choice font
    a' = aspect value of available font
    c = 'font-size' to apply to available font

例えば、'font-size' を 14px で Verdana （アスペクト値は0.58）を指定している場合、Verdana が利用できず、'font-size-adjust' の値（利用可能なフォントのアスペクト値）を 0.58 に指定している場合、代替フォントのアスペクト値が 0.46 であれば、実際のサイズは 14 * (0.58/0.46) = 17.65px で計算されます。

p { font-family: 'Verdana', 'Times New Roman';
	font-size: 1em; font-size-adjust: .56 }

大文字と小文字を持つフォントの場合、文字の読みやすさの観点では、'font-size-adjust' 指定は、見栄え上の同じ大きさを確保するために、非常に有意義です。同じ 'font-size' でも、アスペクト値が異なるフォント間では、体感的な文字の大きさに雲泥の差があることはよく知られています。

Mozilla では有効ですが、残念ながら、他にこの指定が有効なブラウザ、ユーザエージェントを知りません。

font

プロパティ 'font' は、フォント関連の省略プロパティです。

'font' は子要素に継承されます。デフォルトの値は、各々のプロパティで定義された値に従います。inherit は、親要素の値を明示的に継承する指定です。

省略プロパティ

キーワードで指定されるシステムフォントを指定しない場合、次のようにフォント関連のプロパティを一括指定できます。

<'font-style'> || <'font-variant'> || <'font-weight'> ]?
<'font-size'> [ / <'line-height'> ]? <'font-family'>

これらの指定は、システムフォントのキーワード指定と排他的です。システムフォントを指定する機会はめったにないでしょうから、通常は、このシンタックスを覚えていれば十分だといえます。

ここで見るように、'font-stretch', 'font-size-adjust' は、省略プロパティ 'font' では指定できません。

/* 'font-style', 'font-weight' が normal
   'font-variant' が small-caps
   'font-size' が 1.2em
   'line-height' が 1.3 倍
   'font-family' は serif */
address { font: normal small-caps 1.2em/1.3 serif }

/* 'font-style' が oblique
   'font-size' が 12px
   'font-family' が 'Helvetica', sans-serif
   他のプロパティは初期値
   'font-stretch' は condensed */
td { font: oblique 12px 'Helvetica', sans-serif; font-stretch: condensed }

システムフォント

個別のフォントのプロパティを指定せずに、システムフォントと呼ばれる OS にデフォルトのフォントを指定することができます。

caption

ボタンやドロップダウンなどのキャプション制御に使用されるフォント。

icon

アイコンのラベルに使用されるフォント。

menu

ドロップ・ダウン・メニューやメニュー・リストなどのメニューに使用されるフォント。

message-box

ダイアログ・ボックスに使用されるフォント。

small-caption

スモール制御をラベルするために使用されるフォント。

status-bar

ウィンドウ・ステータス・バーに使用されるフォント。