Inkscape+FontForgeでフォントを作成してみたときの手順メモ

Inkscape+FontForgeでフォントを作成してみたときの手順メモ

  • 2007/07/01 文書作成。

  • 2016/01/30にページを移転。

環境について

Inkscapeで複数の文字をデザイン。

フォントデザイン作成作業中のスクリーンショット
  • (R,G,B)=(00,00,ff)=青色の四角形(rect)で、1文字分の範囲枠を示す。

  • (R,G,B)=(00,ff,00)=緑色の線は、ガイド用。分割時には無視される。

  • (R,G,B)=(00,00,00)=黒色の線が、フォントの形状(=グリフ)を表す。

  • 範囲枠、及び、ガイド用の図形は別レイヤーに置いて、そのレイヤーをロックしておくと作業しやすい。(レイヤー名横の鍵アイコンをクリックすると、ロック/ロック解除ができる)

  • フォント形状は、必ず範囲枠(青枠)の中に収まるようにする。はみ出すと分割時に無視される。

以下、サンプル。(Inkscape svg 形式で保存。)

  • 記号部分 svg / font_kigou_org.svg

  • 数字部分 svg / font_number_org.svg

  • 英字部分 svg / font_abc_org.svg

  • 範囲枠・ガイド、テンプレート svg / grid_base.svg

Inkscapeから分割用のsvgファイルを出力

Inkscape のデフォルト形式で保存した svg ファイルではperlスクリプトで上手く分割できなかった。

分割しやすいように編集・別途保存したものを使う。

後で修正作業がしやすいように、オリジナルのファイルは必ず残しておく。

以下の作業を行う。

  • グループ解除。(オブジェクトを選択→メニュー:オブジェクト→グループ解除)

  • ストロークをパスに変換。 (オブジェクトを選択→メニュー:パス→ストロークをパスに変換)

  • 「プレーンsvg」形式で保存。(メニュー:ファイル→コピーを保存→ファイル形式を「プレーンsvg」にして、別名をつけて保存)

以下、サンプル。(「プレーン svg」形式で保存。)

  • 記号部分 プレーン svg / plain_kigou.svg

  • 数字部分 プレーン svg / plain_number.svg

  • 英字部分 プレーン svg / plain_abc.svg

分割後のsvgをどこに割り当てるか指定するテキストを作成

8x8個の文字が並んでるものとして、

00 01 02 03 04 05 06 07 08

09 10 11 12 13 14 15 16 17

…中略…

46 47 48 49 50 51 52 53 54

55 56 57 58 59 60 61 62 63

それぞれを unicode でどこに割り当てるかについて、テキストファイルに列挙する。

  • 「uXXXX」という形で列挙。

  • 「#」以降はコメント。

  • 空行は無視される。

u0021 # ! 00

u0022 # " 01

u0023 # # 02

u0024 # $ 03

u0025 # % 04

u0026 # & 05

u0027 # ' 06

u0060 # ` 07

u0028 # ( 08

u0029 # ) 09

u002A # * 10

…(中略)…

u0000 # 61

u0000 # 62

u0000 # 63

フォント形状が入っていない空欄部分も、文字コードを列挙しておく。(記述する文字コードはなんでもいい。)

以下、サンプル。(テキスト形式で保存。)

  • 記号部分 / code_kigou.txt

  • 数字部分 / code_number.txt

  • 英字部分 / code_abc.txt

以下、指定テキストファイルを仮作成する perlスクリプト。

  • code_txt_output.pl

例えば、

perl code_txt_output.pl 0x0100

のように指定すると、0x0100 ~ 0x0100 + 63 行分を出力する。

perl code_txt_output.pl 0x0100 > code_kigou.txt

のようにすれば、テキストファイルに保存できる。

perlスクリプトでsvgファイルを1文字単位で分割

  • svgsplit_sample.pl

使い方:

perl svgsplit_sample.pl <プレーンsvgファイル> <文字コード割り振り指定ファイル>

例:

perl svgsplit_sample.pl plain_kigou.svg code_kigou.txt > log_kigou.txt

上の場合、異常動作時の確認用に、処理過程を log_kigou.txt に保存してる。

分割されたsvgの一例:

  • u0024.svg

FontForgeに複数のsvgファイルをまとめてインポート

作業用フォルダに svgファイル群をコピーしておく

FontForge起動用batファイル = fontforge.bat が入っているフォルダの中に test_svg フォルダを作成し、

分割出力された uXXXX.svg 群をコピーしておく。

FontForgeをスクリプトモードで動かすためのbatファイルを作成

fontforge.bat を fontforge_script.bat という名前で別名保存して最後の行を書き換える。

fontforge_script_bat.txt

set FF=C:\usr\local\fontforge\

rem set FF=%~dps0

set PATH=%FF%bin;%FF%bin\Xming;%SystemRoot%\system32;%SystemRoot%;%SystemRoot%\system32\Wbem

set DISPLAY=127.0.0.1:9.0

set XLOCALEDIR=%FF%bin\Xming\locale

set LANG=ja

set AUTOTRACE=potrace

set HOME=%FF%

cd /D "%HOME%"

if NOT EXIST "%FF%bin\Xming\fonts\TTF\msgothic.ttc" (

copy /Y /B "%SystemRoot%\Fonts\msgothic.ttc" "%FF%bin\Xming\fonts\TTF\msgothic.ttc"

)

start /B %FF%bin\Xming\Xming.exe :9 -xkbmodel jp106 -xkblayout jp -multiwindow -clipboard -ac -silent-dup-error

%FF%bin\xrdb.exe -nocpp -load "%FF%bin\app-defaults\FontForge"

start /B %FF%bin\fontforge.exe -script %FF%testimport.pe

上の例では、testimport.pe というスクリプトファイルを FontForge に読み込ませている。

FontForge用スクリプトファイルを記述

testimport.pe の内容。

  • testimport_pe.txt

#!/usr/bin/fontforge -script

#

# uXXXX.svg import -> test.sfd output

_ttfname = "test.ttf"

_importfile = "test_svg/u*.svg"

# ----------------------------------------

# new data

New()

Reencode("unicode")

SelectAll()

SetGlyphChanged(0)

# ----------------------------------------

# .svg import

# $trace=1

Import(_importfile,0,2)

# $trace=0

#set_fontnames()

#set_bearings()

#set_kernings()

# ----------------------------------------

# edit

SelectAll()

RoundToInt()

SelectAll()

RemoveOverlap()

SelectAll()

Simplify()

Simplify()

Simplify()

# ----------------------------------------

# save

Save(_ttfname:r + ".sfd")

Close()

# ----------------------------------------

# save ttf

Open(_ttfname:r + ".sfd")

Generate(_ttfname, "", 0x94)

# Generate(_ttfname, "", 0x84)

Close()

Quit()

  • test.ttf,test.sfdというファイル名で保存するよう指定。

  • test_svg\u*.svg をインポートするように指定。

  • インポート後、以下の処理をしてから保存する。

    • 座標値を整数で丸める。(RoundToInt)

    • パスの重複部分を無くす。(RemoveOverlap)

    • パスの単純化を数回行う。(Simplify)

FontForgeにsvgファイル群をインポート

  1. fontforge_script.bat が入っているフォルダをカレントフォルダにする。

  2. fontforge_script.bat を実行する。スクリプトモードで動くので、ウインドウやダイアログ等は表示されない。

  3. 同フォルダ内に、test.sfd と test.ttf が出来上がる。

以下、サンプルファイル。

  • test.sfd

  • test.ttf

文字幅その他を微調整。ttfを出力

FontForgeでtest.sfdを開いて、気になるところを微調整。

  • フォント名を指定する。(エレメント→フォント情報→フォント名を指定。)

  • 全文字の幅を設定する。(全文字を選択して、右クリック→幅を設定。)

  • 全文字を幅の中央に調整する。(全文字を選択して、右クリック→幅の中央に。)

  • 0~9,a~z,A~Zの文字幅を自動で調整する。(メトリック→幅の自動調整。)

  • ヒントをつける。もしくは無くす。(文字を選択して、右クリック→自動ヒント。もしくは、メニュー:ヒント→ヒントを削除。)

別名保存した後、ttfファイルとして出力。(ファイル→フォントを出力。)

結果のサンプルファイル

フォント見本画像を GIMP で作成してみた。

  • m256testfont01.sfd

  • m256testfont01.ttf

できれば、このフォントデータを、 NYSL Version 0.9982 に従って配布したいのだけど…。

FontForge で出力したフォントデータって、ライセンスはどうなってるんだろう?

FontForge のソレを引き継いでしまうのだろうか?

作業に関して参考にしたページ・サイト