フォントのコントロール

Webページにおけるフォントの扱いには、多くの制作者の悩むところです。ページを閲覧する人たちがどのようなフォントでどのくらいの大きさで使っているかを知るすべはありません。

また、スタイルシートでフォント名を設定をしたところで、閲覧者がそれに適応するものを持っていなかったら絵に描いた餅です。Webページのデザインに深く関わるフォントのコントロールは、ある意味で非常に困難であるといわざるを得ません。

スタイルシートにおけるフォントの大きさ
スタイルシートでは次のような単位が設定できます。
スタイルシートにおけるフォントの単位
単位 説明
mmミリメートル
cmセンチメートル
inインチ(1インチ=約25mm)
ptポイント
pcパイカ(1pc=12pt)
em大文字のMの高さを基準にした1文字の大きさ
ex小文字のxの高さを基準にした1文字の大きさ
pxピクセル
%パーセント (標準の大きさに対する比率)
pt はポイントで、フォントサイズを示す一般的な単位です。 pc は12ポイントを 1pc とするフォントサイズを示します。mm、cm、in、pt、pc は環境などに左右されない絶対値による指定となります。つまり、絶対値で指定した大きさは、ユーザ側で変更することができません。
それに対し、em、ex、px、% はユーザ側の画面サイズなどに合わせて相対的に変化する単位です。
em ex は要素内のフォントの高さを1とします。 em は大文字の M の高さを基準となり、ex は小文字の x の高さを基準とします。ただし、em については font-size属性を指定したときに限って、親要素のフォントサイズを基準にします。また、px(ピクセル)はモニター画面上の1ピクセルを意味します。
% は属性によって、何に対する割合かは異なりますが、多くの場合は親要素を基準とした割合となります。相対値は、ユーザ側で自由に大きさを変更することができるので、できるだけフォントの大きさは相対地を指定するように心がけましょう。
下記に実際のフォントサイズがどれくらいなのかを検証しました。なお、親要素は特に設定していません。
実際のフォントサイズ
単位 実際のサイズ
15mm15mm
1cm1cm
1in1in
12pt12pt
1.5pc1.5pc
2em2em
1ex1ex
16px16px
250%250%
スタイルシートにおけるフォントの種類
何も設定しなければ通常、ユーザが設定したフォントで表示されます。これはフォントサイズも同じです。フォントの書体もデザインを決定する場合の重要なポイントですが、はっきりいって、書体にばかりとらわれたデザインですと、悲惨なことになります。ユーザ環境は千差万別で、制作側で望んだフォントの種類は無視されるものだということを認識すべきでしょう。
それでもわずかながら望みはあります。それは明朝系かゴシック系か、固定ピッチフォント系かを設定することができます。これだけでもデザイン上、何とかなるものです。下記の状態であなたのブラウザは如何に表現しているでしょうか。
font-familyの設定
設定 実際の表示
明朝体 serif 明朝体系のフォント
ゴシック体 sans-serif ゴシック体系のフォント
筆記体 cursive 筆記体系のフォント
装飾体 fantasy Lectur for Begginer
等幅体 monospace 固定ピッチ系のフォント
下記に掲げるものは WindowsMacintosh、それぞれの OS環境にはじめからインストールされているフォントの一覧です。(ただし、OSのバージョンによって異なる)これを見ると、両方のOSに共通してインストールされている英語フォントがいくつかあります。
それは主に、米国 Apple社が Web用フォントに開発したものです。フォントの種類を指定する際は、できるだけこれらの中から選ぶようにするといいでしょう。また、これらのフォントは以下 の 米国 Microsoft社のサイトから無料でダウンロードできます。お試しください。
Free downloads-TrueType core fonts for Macintosh (全部英語です、念のため)
http://www.microsoft.com/typography/fontpack/defoult.htm
システムに標準でインストールされている主なフォント
フォントの系統 Macintosh Windows 共通
英語サンセリフ系ArialArial
Arial BlackArial Black
Chicago
Geneva
Helvetica
ImpactImpact
Trebuchet MSTrebuchet MS
英語セリフ系GeorgiaGeorgia
Palatino
NewYork
Times
Times New RomanTimes New Roman
VerdanaVerdana
英語草書体系Cosmic Sans MSCosmin Sans MS
英語等幅系Andale MonoAndale Mono
Courier
Courier NewCourier New
Monaco
Lucida Console
Small Fonts
絵文字と記号系SymbolSymbl
WebdingsWebdings
WingDings
日本語ゴシック系MS P ゴシック
MS UI Gothic
Osaka
中ゴシック体
平成角ゴシック
日本語明朝系 MS P 明朝
細明朝体
平成明朝
日本語等幅ゴシック系 MS ゴシック
Osaka等幅
日本語等幅明朝系 MS 明朝


This Page is HTML4.01 Valid! 初版公開日 2002年3月20日   最新更新日 2003年9月9日
Copyright(C) 2002〜2008 banban