FONTS

Revised 2003/12/10

CSS ではフォントの種類を指定できます。フォントとは、描画される文字のことで、文字の種類には、ゴシック体、明朝体などがあります。各々のフォントの種類には、太字や斜体などのバリエーションがあります。

CSS では、次の 5 つの総称名で分類されています。これらを、 generic family と呼びます。

sans-serif

ゴシック体風。ひげ無し。

serif

明朝体風。ひげ付き。

monospace

等巾フォント。大文字、小文字、英数文字の巾が等しい。

fantasy

装飾体。花文字、ポップ文字など。読めないフォント（絵文字、シンボル・フォント）は除く。

cursive

手書き体風。

CSS でのフォントの指定方法

CSS の説明は別項に譲ります。

CSS でフォントを指定する場合、次のように記述します。

font-family: 'フォントの種類', 'フォントの種類', 総称名;

個別のフォント名 (font family) は一重引用符で括ります。総称名 (generic family) は括りません。複数のフォントを指定する場合、先に見つかったものが採用されます。全て見つからなかった場合は、ブラウザに設定されたデフォルトのフォントで代用されます。

次の例は、 p 要素のフォントを 'Arial', 'Tahoma', sans-serif に指定するものです。

p { font-family: 'Arial', 'Tahoma', sans-serif }

文章の読みやすさは、フォントの種類だけでなく、大きさと行間の方が強く影響します。次の例は、文字の大きさをブラウザの標準の1.1 倍、行の高さをフォントの高さの 1.3 倍に指定するものです。

p { font-size: 1.1em;
    line-height: 1.3;
    font-family: 'Arial', 'Tahoma', sans-serif }

フォント名に大文字と小文字は区別しません。'Arial' と 'arial' は同じフォントです。

詳細は、CSS 入門、 CSS リファレンスをご利用ください。

注意

フォントに凝るのは楽しいのですが、注意点もあります。

日本語は等幅フォント、英文はプロポーショナル・フォントが基本です。プロポーショナル・フォントとは、文字によってフォントの巾を変えて割り付けるフォントの種類のことです。プロポーショナルフォントでは、大文字、小文字、数字は全て異なる巾で割り付けられます。一方、当幅フォント場合は、全て同じ巾で割り付けられます。

ウェブサイトで使う場合の注意点もあります。コンピュータ上では、フォントはインストールする必要があります。ブラウザは、ローカルの PC 上で実行されているので、閲覧に利用しているコンピュータにインストールされているフォントだけしか表示できません。当該コンピュータにインストールされていないフォントが指定されている場合、ブラウザはデフォルトのフォントで代用します。如何に凝ったフォントを指定しても、そのフォントがインストールされたマシンを使って閲覧してもらわないと、単にデフォルトのフォントが選択されます。どのフォントをデフォルトにするかは、ブラウザの設定によって変更可能で、閲覧者がどのフォントを表示できるかを知るすべはありません。

文章は読みやすいフォントを選択しましょう。フォントが使えないマシンでも、閲覧に支障をきたさないようにデザインしましょう。

以下では、Winodows で利用できる一般的なフォントを、総称名でカテゴライズしています。CSS が OFF のブラウザでは当然全てのフォントがデフォルトのままで表示されます。インストールされていないマシンでも、デフォルトのままで表示されます。

フォントの差異は、フォントのサイズが大きくなるほどクローズアップされます。ここでは、標準の 1.5 倍のサイズを指定しています。

数年前からメンテしていますが、フォントにも趨勢があるなあという感じがします。凝っても、数年後には使えないかも知れないことを配慮してください。

sans-serif

serif

monospace

fantasy

cursive

絵文字