ビットマップフォントとアウトラインフォント

ビットマップフォント

点の集合体として設計されたフォントをビットマップフォントといいます。

各点は描画されるか否かの1ビットの情報です。一般に8ビットごとにまとめてバイト列で表現します。

上図のAの部分の1行目が□□□■■□□□ですから、白が0、黒が1であるとして 00011000 つまり16進表記で 0x18。 次の行も同じで、その次が 00100100 なので 0x24 というようにしていきます。このようにして A は、

18 18 24 24 24 7E 42 42 42 

B は、

7C 42 42 42 7C 42 42 42 7C 

ビットマップフォントは小さい文字だけならばデータ量も少なくて済み、表示のための負担も少ないのでWindowシステムのGUIになる前から使われています。

Courierでビットマップフォントを調べる

Debian GNU/Linux の lenny というバージョンではビットマップフォントは少数派になっていますが、CUIの表示のためには無くなることはないでしょう。

ここではCourier(クーリエ)というフォントでビットマップフォントの実例をみてみます。

ビットマップは拡大するとギザギザが目立つし、縮小すると隙間がつぶれたり線がなくなったりと形が崩れます

元々
12ptのA
18ptを
12相当に縮小
18ptのA 18ptを
32相当に拡大
元々
32ptのA
本来の大きさ
4倍に拡大

そこで何種類かの大きさのものを設計します。

pt 8 10 12 14 18 24 32
本来の大きさ
4倍に拡大

しかし、この方法で次々と大きなフォントを作っていくとデータ量が莫大になってしまいます。Courier などビットマップ方式のフォントはLennyでは拡大しても、ある程度以上は大きくなりません。(ソフトによっては汚くなっても無理矢理拡大する場合があるかも知れません)そしてギザギザが見えています。このギザギザをエイリアシングといいます。

アウトラインフォント

大きく拡大しても形が美しいように、また線の太さの変化や「はね」や「はらい」などのデザインを表現するために文字を構成する線の輪郭(outline)を線のデータとして記憶するようにしました。これがアウトラインフォントです。

IPAフォント さざなみフォント

Courier 10 Pitchでアウトラインフォントを調べる

Courier とほぼ同じデザインでアウトラインフォントである Courier 10 Pitch で仕組みとデザインをみてみます。

ディスプレイは点の集まりですから、アウトラインフォントも最終的には点のデータに変換されます。これをラスタライズといいます。まず輪郭線のデータを拡大してから、その中にある点を塗りつぶして文字を作ります。

赤い線が文字の形を表す線です。緑の線が画面を作っているピクセルを表しています。この赤い枠の中にあれば100%の濃さで黒く塗り、一部がかかっていればその量に応じて薄く塗ってみました。このようにすれば拡大が自由にできます。

輪郭データ 18x18ピクセル程度に出力
(拡大した概念図)
36x36ピクセル程度に出力
(拡大した概念図)
180x180ピクセル程度に出力
(実際の出力)

仕組みがわかったので、ビットマップフォントのCourierとアウトラインフォントである Courier 10 Pitch を同じ大きさで比較してみます。

アウトラインフォントの Courier 10 Pitch

pt 8 10 12 14 18 24 32
本来の大きさ
4倍に拡大

ビットマップフォントの Courier (再掲載)

pt 8 10 12 14 18 24 32
本来の大きさ
4倍に拡大

アウトラインフォントの間違い

次の認識は間違いです。

間違い1:データを線で持っているのでギザギザが無くきれい

最終的に表示される時はビットマップと同じにピクセルで表されますからギザギザが無くなるわけではありません。ビットマップでは大きなフォントが用意されていないために無理に拡大するとギザギザが拡大されて目立つということなので、大きなフォントをビットマップで用意すれば同等のきれいさを得ることができる。

特に小さな文字はアウトラインフォントでは返って汚くなりがちです。アウトラインフォントの中には小さい字のために内部にビットマップデータを隠し持っている場合があります。

間違い2:ビットマップでは線の太さの変化を表現できない

大きなフォントをビットマップで用意すれば同等に表現できます。ビットマップは線の太さの違いなどを表現できないような小さな文字に使われることが多いので細かな変化を付けられないだけです。

間違い3:アウトラインフォントは色の濃さも使う

上記の例では黒の他に灰色の部分がありギザギザの解消に一役買っています。小さい文字ではこれがないとつぶれて読めないことがありますが、色の濃さを使わないアウトラインフォントもあり得ますし、逆に灰色の部分を持つビットマップを作ることもできます

間違い4:アウトラインフォントはデータ量が多い

小さなフォントだけならビットマップの方がデータ量を少なくできます。しかし大きなフォントを品質を保って作るとなるとアウトラインの方が少なくできます。ビットマップは大きさが2倍になるとデータ量は4倍になります。しかも拡大・縮小をすると品質が落ちるのでいろいろな大きさのフォントをたくさん作る必要がありますのでアウトラインフォントと同じ品質で大きな文字を自由な大きさの字を作れるようにするにはビットマップの方がデータ量が多くなります。

確かに実際のビットマップフォントのファイル容量はアトラインフォントより小さいですが、これは大きなサイズの文字を入れていないことと、灰色の部分がなく白か黒かであることによります。

間違い5:アウトラインフォントは表示に時間がかかる

確かにアウトラインフォントは輪郭データと大きさから計算してビットマップにあたるデータを作り出してから表示しますから、ビットマップの方が表示が速そうです。小さな文字ではそれは揺るぎません。しかし大きな文字になるとビットマップでは文字のデータが大きくなり全部をあらかじめメモリ上に用意することができなくなる可能性があります。この場合ハードディスクなどに読みとりに行くことになりますがこれはかなり時間がかかる作業になります。こういう状況では一概にアウトラインフォントは表示に時間がかかると断言できません。

まとめ

ビットマップ
(Courier)
拡大・縮小で品質が下がる
いろいろな大きさを作るとデータ量が多くなる。
Debian GNU/Linux のgnome環境で出せるCourierの最大がこれ。
アウトライン
(Courier 10 Pitch)
拡大・縮小でも品質が保たれる
一つのデータからいろいろな大きさを作れるのでデータ量を減らせる
聖愛中学高等学校
http://www.seiai.ed.jp/
Sep. 2009