Create  Edit  Diff  FrontPage  Index  Search  Changes  History  Source  RSS  wikifarm  Login

フォントの自作に挑戦

UNIX USER 誌 2004 年 3 月号 のフォント特集の元原稿より

Part3 では、ビットマップフォントとアウトラインフォントを作る様子を紹介する。

ビットマップフォントを作ろう

X11 で使える BDF 形式のビットマップフォントの作成について紹介する。 BDF フォントの編集ツールはいくつかあるが、ここでは Motif ベースの GUI エディタである xmbdfed と、通常のエディタを用いて WYSIWYG 風に編集する方法について紹介する。

A. XmBDFEd?

XmBDFEd は、Motif ベースの BDF エディタで、フリー Unix でも LesstifOpen Motif を用いてビルドすることができる。

A.1 XmBDFEd? のビルド

http://crl.nmsu.edu/~mleisher/download.html から

を取得する。

$ tar xzf xmbdfed-4.5.tar.gz
$ cd xmbdfed-4.5
$ patch < /home/kazuhiko/xmbdfed-4.5-patch1
patching file bdfgname.c
patching file xmbdfed.man
(Makefile を適宜編集する。最低限 INCS と LIBS を自分の環境に合わせる)
$ make
●リスト Makefile の設定例 (部分)
#
# Uncomment these for Linux.
#
INCS = -I/usr/X11R6/include $(FTYPE_INCS)
LIBS = -lXm \
       -L/usr/X11R6/lib -lXpm -lXmu -lXt -lXext -lX11 -lSM -lICE $(FTYPE_LIBS)
xmbdfed-1s.png

B. エディタで編集篇

BDF フォントはテキストフォーマットなので、その気になれば一からエディタで書くことも無理ではないが、それはあまりに大変である。 そこで、BDF フォントのビットマップ定義部分をより見やすくした形式に変換してからエディタで編集する方法を紹介する。 ただし、こちらの方法は、新規に BDF フォントを作るよりも、既存の BDF フォントをちょっと編集する時にお勧めする。

はじめに、東雲フォントに同梱の bdf2bit と bit2bdf を用意する。

(shinonome-*-src.tar.bz2 を展開したディレクトリで)
./configure

これで、tools/ ディレクトリの中に bdf2bit と bit2bdf ができる。

  • 使い方 (BDF → BIT)
bdf2bit file.bdf > file.bit
  • 使い方 (BIT → BDF)
bit2bdf file.bit > file.bdf

この BIT 形式というのは、東雲フォント原作者の古川泰之さん考案の形式で、BDF 形式のビットマップ定義を目で分かる形式にしたものである。 例えば「東雲 16 ドットゴシック」の「字」の部分で比較するとこのようになる。

  • BDF 形式
STARTCHAR 3b7a
ENCODING 15226
SWIDTH 960 0
DWIDTH 16 0
BBX 16 16 0 -2
BITMAP
0080
0080
7ffe
4002
4002
0ff0
0020
00c0
0080
7fff
0080
0080
0080
0080
0080
0180
ENDCHAR
  • BIT 形式
STARTCHAR 3b7a
ENCODING 15226
SWIDTH 960 0
DWIDTH 16 0
BBX 16 16 0 -2
BITMAP
........@.......
........@.......
.@@@@@@@@@@@@@@.
.@............@.
.@............@.
....@@@@@@@@....
..........@.....
........@@......
........@.......
.@@@@@@@@@@@@@@@
........@.......
........@.......
........@.......
........@.......
........@.......
.......@@.......
ENDCHAR # 字

このように、BIT 形式ではそのまま「文字の形」が見えるので、あとは好みのエディタで一応 'WYSIWIG' に編集できる。 なお編集する際に、横幅数や、'.' の ',' への打ち間違いなどは許容するようになっているので、ある程度はラフに編集することができるだろう。 編集後は逆に bit2bdf で変換して BDF 形式にする。

なお、上述の東雲フォントのアーカイブには、mkbold *1 と mkitalic *2という有用なツールも同梱されている。ぜひ積極的に活用してほしい。

  • mkbold での変換結果
STARTCHAR 3b7a
ENCODING 15226
SWIDTH 960 0
DWIDTH 16 0
BBX 16 16 0 -2
BITMAP
.......@@.......
.......@@.......
@@@@@@@@@@@@@@@.
@@...........@@.
@@...........@@.
...@@@@@@@@@....
.........@@.....
.......@@@......
.......@@.......
@@@@@@@@@@@@@@@@
.......@@.......
.......@@.......
.......@@.......
.......@@.......
.......@@.......
......@@@.......
ENDCHAR # 字
  • mkitalic での変換結果
STARTCHAR 3b7a
ENCODING 15226
SWIDTH 960 0
DWIDTH 16 0
BBX 21 16 -2 -2
BITMAP
.............@.......
.............@.......
......@@@@@@@@@@@@@@.
.....@............@..
.....@............@..
........@@@@@@@@.....
.............@.......
...........@@........
...........@.........
...@@@@@@@@@@@@@@@...
..........@..........
..........@..........
.........@...........
.........@...........
.........@...........
.......@@............
ENDCHAR # 字

アウトラインフォントを作ろう

PfaEdit? のインストール

PfaEdit? は、George Williams さん作の高機能アウトラインフォントエディタで、http://pfaedit.sourceforge.net/ で開発が進められている。執筆時点での最新版は 02-Jan-2004。

特に X11 以外に依存するライブラリはないが、あらかじめ以下のものがインストールされていれば、PfaEdit の機能が増える。

ライブラリ等追加される機能
libpngPNG 画像の読み込み
libtiffTIFF 画像の読み込み
libungifGIF 画像の読み込み
libjpegJPEG 画像の読み込み
libxml2SVG ファイルの読み込み
freetypeビットマップレンダリングの質向上、TrueType デバッガ
○ビルド方法
tar xzf pfaedit_full-040102.tgz
cd pfaedit-040102
./configure
make
sudo make install

いよいよフォント作り

いきなりたくさんのグリフのある本格的なフォントを作るにはページ数も時間も足りないので、ここでは以下のような数字フォントの作り方を紹介する。

  • 作るグリフは '0'〜'9' と、記号類 (' 'と'+'と','と'-'と'.')
  • サンセリフ体
  • 古式ゆかしくノンライニング数字

「ノンライニング数字」というのは、高さが全てそろっている通常の数字 (ライニング数字) と違って、字によって高さが異なる数字で、洋書のペーパーバックのノンブル (ページ番号) などで用いられている。

まずは下書き

いきなりコンピュータ上で作字していくこともできるが、まずは手書きであれこれ書いてみて、デザインの方向を検討してみるのがよいだろう。 今回のフォントの下書きはとりあえずこんな感じになった。 仕様としては、縦横比は 10:6 のエリアを使い、下から 25% の所をベースラインと設定した。 ここまでの制作時間はおよそ 1 時間くらい。

0.png 1.png 2.png 3.png 4.png 5.png 7.png 8.png 9.png

なお、'6' が無いのは '9' を 180 度回転させて作ればいいかな、ということでちょっと手を抜いたから。

フォントの各種情報の設定

$ pfaedit

と PfaEdit? を起動し、「新規」を選ぶと、グリフ一覧画面が現れる。

pfaedit.png ★「図? PfaEdit? の起動画面」

newfont.png ★「図? 新規フォントのグリフ一覧画面」

「エレメント」→「フォント情報」を選び、まずはフォント名やコピーライトを入力する。 今回は UnixUser? 誌の数字フォントということで、「UUdigit」と名付けることにした。

fontinfo.png ★「図? フォント名の設定画面」

次に、設定画面の「一般情報」のタブを選び、今回のデザインの仕様にあわせて、高さを 750、深さを 250 に設定する。

文字幅の設定

今回作成するのは数字フォントなので全てのグリフを等幅で作る。 PfaEdit? のデフォルトは高さが 1000 なので、今回のフォントでは横幅は 600 になる。 グリフ一覧画面で今回作成するグリフを選択し*3 (Shift を押しながらクリックしていく)、「メトリック」→「幅を設定」を選んで、「文字幅の設定値」を 600 にする。

これで前準備は終了。ではいよいよアウトラインの編集に入ろう。

アウトラインの編集

pfaedit_fontview.png ★「図? PfaEdit? のアウトライン編集画面」pfaedit_fontview.eps.gz

0 の作成

はじめに、形が単純な '0' を作成する。 グリフ一覧画面で '0' をダブルクリックすると、'0' のアウトライン編集画面が現れる (図 ?)。 「ファイル」→「取り込み」を選び、'0' の下絵を '0.png' を取り込む。 取り込んだら、レイヤーパレットの背面の左の◆を押して、背面レイヤーを編集レイヤーにし、縦が 1000で横が 600 になるように下絵を拡大および移動する。

pfaedit_0_1.png ★「図? 「0」用アウトライン編集ウィンドウの初期画面」

pfaedit_0_2.png ★「図? 「0」用アウトライン編集ウィンドウの下書き画像取り込み直後の画面 」

pfaedit_0_3.png ★「図? 上記の状態から移動、拡大したもの」

次に、レイヤーパレットから前面レイヤーを編集レイヤーにして、ツールパレット左下の「四角、丸」ツールをクリックし (クリックするたびに四角と丸が切り替わる)、丸ツールにする。 丸ツールは左上から右下にかけてドラッグすると、円や楕円を描くことができるが、Shift キーを押しながらドラッグすると正円を描ける。 では下絵にあわせて、 Shift キーを押しながらドラッグして、外側と内側の二つの丸を描こう。

0_1.png ★「図? 二つの丸を描いた状態」

ここで、「表示」→「塗りつぶし」を選んでみると、内側の円も塗りつぶされてしまっている。

0_2.png ★「図? 内側の丸も塗りつぶされている状態」

そこで、「選択」ツールで内側の円をクリックして、「エレメント」→「左回り」を選ぶと、内側の円をちゃんと抜いてくれる。

0_3.png ★「図? 内側の丸が抜かれた状態」

このように、PfaEdit でアウトラインを編集するときは、「外側の線は右回り、内側の線は左回り」にすると、内側を抜いてくれる。

2 の作成

'2' にはいろんな種類の線が出てくるので、PfaEdit の各描画ツールの練習にちょうどよい。

'0' の時と同様に下絵を準備して前面レイヤーを編集レイヤーにしたら、まず、「コーナー点」ツールを選択し、'2' の左上の角をクリックし、ここから、時計回りに形を取っていく。

2_1.png

つぎに、「カーブ点」ツールを選び、'2' の一番上の水平になっているあたりをクリックし、さらに右端の垂直になっているあたりをクリックする。 ここで、水平や垂直になっているところに点を置いていく理由は、接線方向が水平や垂直になるように制御点を置くことで、レンダリングの際の誤差が出にくくなるからである。

この時点では曲線が全然下絵に沿っていないが気にせずに進めよう。

2_2.png

つぎは、「カーブ開始点」ツールを選び、曲線から直線に変わっていくところでクリックする。ここでも傾きが変なのは気にしない。

2_3.png

再び「コーナー点」ツールを選択し、直線で構成されている部分を順にクリックしていく。

2_4.png

さらに、「カーブ開始点」ツールで直線から曲線に変わるところをクリックし、「カーブ点」ツールで線が垂直や水平になっているところをクリックしていき、最後に「コーナー点」ツールで一周する。

2_5.png

一周した時点で点をすべて選択すると次のようになっているので、各制御点を動かしながら、下絵にあわせていく。 ここで、接線方向が水平や垂直になるところでは、Shift キーを押しながら操作して、正確に水平や垂直になるように制御点を動かす。

2_6.png

このように下絵をなぞっていった結果、こうなる。

2_7.png
他のグリフの作成

こうして、'0' で曲線の向きの設定の仕方を理解し、'2' で制御点の置き方と動かし方を理解できた。 もう PfaEdit? でどんな形を描くこともできるはずである。 他の数字もどんどんなぞって作っていこう。

また、下書きには無いが最低限必要な記号等 '.'、','、' '、'+'、'-' の各グリフを追加した。 ここまでの制作時間はおよそ 3 〜 4 時間くらい。

確認

一通り '0' から '9' までのグリフができたら、「ファイル」→「組見本」を選んで、できた文字をタイプしてみる。

pfaedit_sample.png

いろいろタイプして並べてみると、一文字ずつ編集している時には見えなかった欠点が見えてくるので、気になった文字をそれぞれ修正してはまた組んでみる、というプロセスを何度も繰り返す。

そうして完成したら、「ファイル」→「フォントを出力」を選ぶ。 ここではフォント形式は 'PS Type 1 (Binary)' としたが、好みで TrueType? を出力してもよい。

できたフォントは、Part 2 で解説したように ~/.fonts ディレクトリにコピーすれば、さっそく fontconfig 経由で使うことができる。

sample.png

スクリプトで自動化

PfaEdit? には高機能なスクリプトが付属していて、GUI で操作できる多くの部分がスクリプトによって自動化できる。 ここでは先ほど作った UUdigit フォントの簡易 Oblique 版を作るスクリプトを紹介する。

#!/usr/bin/env pfaedit

# 'UUdigit.sfd' を開く
Open('UUdigit.sfd');

# ',' と '.' と '0'-'9' を選択する
Select(0x2c,0x2c,0x2e,0x2e,0x30,0x39);

# 10 度傾けて、極大点を追加する
Skew(10);
AddExtrema();

# Postscript の italic angle フィールドを設定する
SetItalicAngle(10);

# 既存のヒントを消して自動ヒント処理をする
ClearHints();
AutoHint();

# フォント名を設定して各種形式で書き出す
SetFontNames('UUdigit-Oblique', 'UUdigit', 'UUdigit Oblique')
Save('UUdigit-Oblique.sfd');
Generate('UUdigit-Oblique.pfb');
Generate('UUdigit-Oblique.ttf');

★「リスト?? makeoblique.pe」

UUdigit.sfd と同じディレクトリで

$ ./makeoblique.pe

とすれば、しばらく待つと同じディレクトリに PfaEdit? 形式、Type 1 形式、TrueType 形式でそれぞれファイルが生成される。

sample2.png

この程度の操作なら手動でやっても変わらないように感じるかもしれないが、元になるフォントを編集するたびに上記の操作をやる手間を考えると、やはり自動化できる部分は早いうちにスクリプトを書いておくほうがよいだろう。

他にも多くの機能があるので、詳細については PfaEdit? 付属のドキュメントをご覧いただきたい。

PfaEdit? のドキュメントは、スクリプト機能に限らずとても充実したドキュメントなので、英語ではあるが是非一度じっくりと目を通してみることをお勧めする。

まとめ

フォント作りというと、熟練した職人が多大な労力をかけて作るものというイメージがあり、とても素人が手を出せるものではないように思っている人も多いだろう。 確かに実際そういうものでもあるのだが、今回紹介したようにちょっとした思いつきで軽いノリで作ってみるのもまた楽しいものである。

よいフォントの制作には、よい目とよい手とよい頭が必要だが、それは決して全てかねそなえた一人の超人でないとできないわけではない。 多くの人がそれぞれ自分のできる範囲で力をあわせることによって、オープンなフォントを作るプロジェクトは一歩ずつ前進することができるだろう。 興味を持たれた方は、書体関係 Wikiを覗いてみてください。


コラム「Type 1 vs TrueType」

Part 1 で述べたように、Type1 フォントは 3 次ベジエ曲線、TrueType フォントは 2 次ベジエ曲線で記述する。だから、Type1 フォントと TrueType? フォントのどっちがよいか? というのは、「3 次ベジエ曲線と 2 次ベジエ曲線のどちらがフォントを描いたり修正したりするのに適しているか?」ということに他ならない。

★「図? 2 次ベジエ曲線」 curve_fig1.png

★「図? 3 次ベジエ曲線」 curve_fig2.png

この議論は宗教戦争のように長年くりかえされてきたことだが、私見を述べれば 3 次ベジエ曲線の方が適していると思う。

まず、3 次ベジエ曲線は制御点が四つで、2 次ベジエ曲線は制御点が三つなので、単純に考えれば 2 次ベジエ曲線の方が少ない制御点で記述できそうに見える。

ところが、実際に線を描いてみると、「ここの曲線をもうちょっとこっちに膨らませたい」とか「ここの曲線をもうちょっとこっちにひっこめたい」とかいう欲求が出てくるが、この「ここをもうちょっとこっちに」というのが、2 次ベジエ曲線だとどうにも具合が悪くなる。 というのは、2 次ベジエ曲線だと、三つの制御点 P0, P1, P2 からなる曲線を修正しようと P1 を動かすと、曲線全体に影響を及ぼしすぎるからである。 そのため、結局は曲線を二つに分割して調整するしかなくなることが多い。

その点、3 次ベジエ曲線では、四つの制御点 P0, P1, P2, P3 からなる曲線の P0 に近い部分を修正したければ P1 を動かせば良く、逆に P3 に近い部分を修正したければ P2 を動かせば良いので、点を増やすことなく曲線を意図に近づけることが容易である。

また、(迷信かもしれないが) 文字の形状に出てくる筆の流れを感じさせるような曲線は、2 次ベジエ曲線よりも 3 次ベジエ曲線でのほうが描きやすいと言われている。

ちなみに PfaEdit? のデフォルトも 3 次ベジエ曲線であり、本稿でも 3 次ベジエ曲線でのフォント作りを紹介した。

ただし、2 次ベジエ曲線にせよ 3 次ベジエ曲線にせよ、曲線をツールで描く以上は、どうしても「そのツールで描きやすい曲線」を描いてしまいがちになる。 本当に美しい曲線を描くためには、まずは納得がいくまでフリーハンドで線を描いて、それをツールでなぞる方がよい。


コラム「PfaEdit で自動トレース」

PfaEdit? では、外部プログラムを用いて下絵のビットマップ画像を自動的にアウトラインに変換することができる。 現在のところ、外部プログラムとして autotrace と potrace の二つをサポートしています。

autotrace

AutoTrace? は、Martin Weber さん作のプログラムで、http://autotrace.sourceforge.net/ で開発が進められている。 執筆時点での最新版は 0.31.1。

○ビルド方法
tar xzf autotrace-0.31.1.tar.gz
./configure
make
sudo make install

potrace

potrace は、Peter Selinger さん作のプログラムで、http://potrace.sourceforge.net/ で開発が進められている。 執筆時点での最新版は 1.2。

○ビルド方法
tar xzf potrace-1.2.tar.gz
./configure
make
sudo make install

どちらを使う?

autotrace と potrace を比較すれば、特に低解像度の画像の変換結果が potrace の方が優れているようである。 また、「Kappa 20 dot fonts」開発者の狩野宏樹さんは、

PfaEdit?-devel ML で、「AutoTraceよりも potrace のほうが良いから変えたらどうだ」というメールが来ていたので、どんな物かちょっと調べてみた。

驚いた。まだ 1 回も起動していないのに断言するのだが、これは良い。サンプル画像を見ると、かなりの低解像度でもそれなりの出力を出すらしい。アルゴリズムを解説した論文を読んで、そのエレガントさに感動した。

AutoTrace? は、潜在的能力は高いのだが、良好な結果を出すためには多数あるパラメータの最適値を突き止めなければならないという欠点がある。滑らかにする回数を増やしすぎると角が丸まってしまうし、少ないと折れ線が消えない。また、トレースの開始部分が角になるという欠点もある。potrace では、本質的なパラメータは 1 個しか無い。どの程度尖鋭なら頂点とみなすかを表す αmax だけである。

<http://khdd.net/kanou/kangae/2003/Aug.html#19.1>

と述べている。

autotrace と potrace のどちらか一方しかインストールされていない場合は、PfaEdit は自動的にそのプログラムを使うが、もし両方インストールしる場合はデフォルトでは autotrace を使う。 これを potrace が使うように変更するには、環境変数 AUTOTRACE に 'potrace' という値をセットするか、または「環境設定」の「アプリケーション」のところで 'Prefer Potrace' の設定を 'On' にする。

Last modified:2011/11/06 12:12:09
Keyword(s):
References:[unixuser200403]

*1 naga10 フォント作者の永尾さんによる

*2 古川泰之さんが awk で書いて新山祐介さんがより高速な perl 版に書き直した

*3 初めにグリフ一覧画面が出るときは、あらかじめ "A" 以降が表示されるように下にスクロールされているので、すこし上にスクロールすれば、今回作成するグリフが表示される。