Hatena::ブログ(Diary)

Webと文字

よければ、はてブしてください。( ´∀`) George.Nagaoka@gmail.com

JavaScript IME:海外からブラウザで日本語を変換 新URL 旧URL:
多言語入力ブックマークレット:ブラウザでロシア語、中国語、アラビア語・・・
【軍曹が】携帯電話開発の現状【語る】をAA化した
AAのデータベース
趣味のページ

2011-12-18

ギコフォントを作ろう!

モナーフォントとは

f:id:project_the_tower2:20111218091403p:image

上の画像のように文字で書かれた絵をアスキーアートといいます。アスキーアートMS Pゴシックの12ptと決まっています。これがMS明朝だと以下のようになってしまいます。

f:id:project_the_tower2:20111218091404p:image

つまり線が大きくズレてしまうわけですね。このため、MS Pゴシックが存在しない環境でアスキーアートを表示するモナーフォントが開発されました。これはMS Pゴシックとごく似たような文字を含ませたフリーのフォントです*1。下の図はモナーフォントで表示したアスキーアートです。一枚目とそれほど変わりがないと思います。

f:id:project_the_tower2:20111218091405p:image

モナーフォントの問題点

修正: 2011/12/22

 モナーフォントにも問題があります。

  • AAを表示するためだけに用意されたフォントなのに二種類のグリフを含むことは容量のムダ。最近はやりのWebFontとして配信する場合も大変手間が掛かります。
  • 1ドットのズレも許せない私のような原理主義者にとって、モナーフォントは耐えられない。

 仮にMSPゴシックをそのまま違う環境に持ってきたとしても、以下の問題があります。

ギコフォントをつくろう!

修正: 2011/12/22

 12ptのビットマップそのままアウトラインにしたフォントを作る。12pt/24pt/36pt…の倍数でそのとおりに表示されるはず!

f:id:project_the_tower2:20111218091406p:image

著作権ライセンスの問題

こまけぇこたぁry)

書体の著作権は認められていないのでよしと判断…。ただ、不正競争防止法とかライセンス契約とかは…<(^o^)>

MSGOTHIC.TTC→ 002.TTF

 WindowsフォントフォルダにあるMSGOTHIC.TTCを参考資料1のUniteTTCで分割します。

埋め込みビットマップ抜き出し

 TTFファイルから埋め込みビットマップを抜き出します。埋め込みビットマップの仕様は参考資料2を参照してください。ここでは自作のpythonフォントライブラリttfを使用して抜き出します。またFontForge用の送り幅設定用テキストも同時に作成しています。

from ttf import ttf
from PIL import Image

#002.TTF is MS P Gothic File Name.
f = open('002.TTF',"rb");
ms_p_gothic = ttf(f);

#FontForge script
script = open('font_forge_script.txt','w');

cmap = ms_p_gothic.readTable('cmap');
#pratformID = Microsoft(3),encodingID = UCS2(1)
ms_encoding=cmap.getSubTable(3,1);
GIDMap = ms_encoding.charcode2gindex;

for Unicode,GID in GIDMap.items():
    eblc = ms_p_gothic.readTable('EBLC');
    #12pt/em -(96dpi,1pixel=1dot)-> 16pixel/em
    ebdt_offset = eblc.getOffset(GID,16,16);
    #Is there GID in EBDT ?
    if ebdt_offset is False:
        continue;
    
    ebdt = ms_p_gothic.readTable('EBDT');
    #ebdt_offset = point's count array
    eb_bitmap = ebdt.getGlyph(ebdt_offset[0]);

    h_ascender = eb_bitmap['bitmapSizeTable']['hori']['ascender'];
    h_bearing_x= eb_bitmap['metrics']['horiBearingX'];
    h_bearing_y= eb_bitmap['metrics']['horiBearingY'];    
    h_anvance_width = eb_bitmap['metrics']['horiAdvance'];
    script.write("Select(" + str(Unicode) + ')\n');
    script.write("SetWidth(" + str(h_anvance_width*10) + ')\n');

    glyph = eb_bitmap['glyph'];
    width = eb_bitmap['metrics']['width'];
    height = eb_bitmap['metrics']['height'];
    #(255,255,255) is white.
    img = Image.new("RGB",(16,16),(255,255,255));
    for y in range(height):
        for x in range(width):
            if glyph[y*width+x] ==1:
                #(0,0,0) is black.
                try:
                    img.putpixel((x+h_bearing_x,y+(h_ascender-h_bearing_y)),(0,0,0));
                except:
                    print GID,Unicode;
                    
    large_img=img.resize((16*10,16*10));
    large_img.save("glyphs/u" + str('%X' % Unicode) +".bmp");

script.close();
f.close();

 このスクリプトを実行すると、uXXX.bmpという画像がglyphsフォルダに作成されます。XXXにunicode16進数が入ります。

f:id:project_the_tower2:20111218091407j:image

 注意として、元の画像をそのまま1000%拡大したものを保存します。こうしないと、次で説明するpotraceでうまくトレースされません。また「」の一文字だけ、BearingXが負になるために、正しく画像化されません。この点はFontForgeで手動で修正します。

トレース

 自動トレースソフト「potrace」(参考資料3)でビットマップ画像をSVGベクターデータに変換します。以下の一文を書いたバッチファイルを実行することで、glyphsフォルダに同名のSVGファイルが作成されます。

potrace glyphs/*.bmp -s -a 0

FontForge

 フォント作成ソフト「FontForge」を用意します。今回はWindows用のバイナリを使用しました(参考資料4)。起動してNewを選んだ後、メニューバーから以下の操作を実行します。

以上が終わったら、メニューバーからファイル→取り込み→フォーマットをSVGテンプレート、背景で使用のチェックをオフにして、glyphsフォルダ内の任意のuXXX.svgを選択します。

f:id:project_the_tower2:20111218091408p:image

微調整

 取り込んだグリフは全てがベースラインから1unit下にずれていました。メニューバーからファイル→スクリプトを実行を選択して、以下を入力してOKを押します。

SelectAll()
Move(0,1)

次に送り幅を設定します。スクリプトを実行から呼び出すボタンを押して、font_forge_script.txtを指定します。OKボタンを押すとグリフに対して送り幅が設定されます。

f:id:project_the_tower2:20111218091409p:image

「も」の修正

f:id:project_the_tower2:20111218091410p:image

x < 0でカットされてしまった部分を手動で付け足します。画像の赤くなっている場所がそうです。

調整

  1. Ctrl+Aでグリフを全選択して、メニューバーからヒント→ヒントを削除 を選択します。
  2. Ctrl+Aでグリフを全選択して、エレメント→単純化→単純化 を選択します。
  3. Ctrl+Aでグリフを全選択して、エレメント→座標を丸める→整数に を選択します。

otf出力

 メニューバーからファイル→フォント出力を選択し、OpenType(CFF)、ビットマップフォント無し、Validate Before Savingのチェックボックスをオフにして、保存ボタンを押します。upemが2の乗数になっていないと文句行ってきますが、無視して保存します。

sfd出力

 メニューバーからファイル→保存でプロジェクトが保存できます。

確認

 出力されたgiko.otfを確認します。

f:id:project_the_tower2:20111218091411p:image

WebFontでテストします

http://www28095u.sakura.ne.jp/gikofont/testpage.html

f:id:project_the_tower2:20111218091412p:image

ファイル(2011/12/20更新)

FontForgeスクリプト

sfd: http://www28095u.sakura.ne.jp/gikofont/file/giko.sfd

フォント

otf: http://www28095u.sakura.ne.jp/gikofont/file/giko.otf

ttf: http://www28095u.sakura.ne.jp/gikofont/file/giko.ttf

WebFont(IE)用フォント

eot: http://www28095u.sakura.ne.jp/gikofont/file/giko.eot

MAC/Linuxインストール用フォント (名前をMSPGothicにした。そのままインスールすればAAが見れる)

f:id:project_the_tower2:20111220095005p:image:medium

f:id:project_the_tower2:20111220095006p:image:medium

otf: http://www28095u.sakura.ne.jp/gikofont/file/MS-PGothic.otf

ttf: http://www28095u.sakura.ne.jp/gikofont/file/MS-PGothic.ttf

次回

フォントの修正 [追記2012/3/30]

修正1

ビットマップが入っていない文字(空白など)が含まれていないため、ズレズレでした。

スクリプトを以下のように修正し、文字幅テキストを作成します。

#out bitmap character script
advance_width = open('width.txt','w');
#…
    if ebdt_offset is False:
        advance_width.write("Select(" + str(Unicode) + ')\n');
        advance_width.write("SetWidth(" + str(hmtx.getMetric(GID)[0]*160/256) + ')\n');
#…

これをFontForgeに読み込ませ、幅のみのグリフを作成します。

修正2

upemを160から1024に変更しました。

修正3

gaspを修正しました

ファイル

FontForgeスクリプト

sfd: http://www28095u.sakura.ne.jp/gikofont/file/giko2.sfd

フォント

otf: http://www28095u.sakura.ne.jp/gikofont/file/giko2.otf

ttf: http://www28095u.sakura.ne.jp/gikofont/file/giko2.ttf

参考資料

  1. UniteTTC
  2. TrueTypeフォントのフォーマットを調べる その22 - Webと文字
  3. potraceをjavascriptに移植した - Webと文字
  4. unofficial fontforge-mingw

fontfunfontfun 2017/08/27 16:31 こんにちは。
配布されているフォント(http://www28095u.sakura.ne.jp/gikofont/file/giko2.ttf)がアクセスできなくなっていますので、再アップして頂けると幸いです。お手数ですがご検討のほどよろしくお願いします。

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

トラックバック - http://d.hatena.ne.jp/project_the_tower2/20111218/1324175062