Zenn
Closed5

既存のピクセルフォントを改変するための覚え書き

font
むじむじ

やりたいこと

  • 一部の文字の字形をを少しだけ修正したい
  • 文字を少しだけ追加したい
  • 他のフォントと行間やベースラインを揃えたい

追加だけならPixelTypeやPixel font converterなど画像から生成できるものがあるけど
既存のものから調整する方法を見つけるのに手間取ったのでメモ。

むじむじ
  • 既存のフォントはTTFもしくはBDF（ビットマップフォント形式の一つ）で配布されてることが多いので、そのどちらかを元にする
    • TTFはパスデータとしてアウトライン化されてるので、ドット単位でポチポチ修正するにはピクセルフォント向けの手順が必要
    • BDFはビットマップだけど扱えるソフトがそもそも少なく、TTFへの変換がちょっと手間（特にMac）
むじむじ

試してみて、ある程度うまくいったツールは3つ

  • Glyphs Mini ★有償だけど一番よかった
  • BitFontMaker2
  • FontForge (+ bdfresize + potrace ) ☆ Glyphs Mini入れるなら行間・ベースライン調整だけに使うでよさそう
むじむじ

Glyphs Mini

https://glyphsapp.com/buy

多機能なフォントエディタGlyphsの廉価版
ピクセルフォント用のツールが備わってる。↓を読めばOK
https://glyphsapp.com/learn/creating-a-pixel-font-in-glyphs-mini

グリッドサイズはフォントサイズ / UPM を指定する
（UPMは "ファイル -> フォント情報" から確認できる）

できること

  • 一部の文字の字形をを少しだけ修正 : できる
  • 文字を少しだけ追加 : できる
  • 他のフォントと行間やベースラインを揃える : 基本的な設定はできるけど、行間など細かいフォントのメタデータ設定はminiでは変更できないので、その辺はFontForgeの併用が必要

BitFontMaker2

https://www.pentacom.jp/pentacom/bitfontmaker2/

ブラウザで動くピクセルフォントエディタ。16pxまで作れる
既存フォントの改変の場合、右上の "IMPORT TTF" から読み込んで使用する
日本語・中国語など色々なフォントも実は使える。
（ただ自分が試した中で1つだけ文字が一部読み込まれなかったフォントがあったりした）（わからん）

インポートしたTTFをビットマップに変換してくれるのだけど
↓のFont-sizeを正確に調整しないとガタガタになる。

左のプレビュー領域が512pxの16マスで、その中での大きさを指定する仕様っぽいので
32 * フォントサイズ を指定するといい感じになる

できること

  • 一部の文字の字形をを少しだけ修正 : できる
  • 文字を少しだけ追加 : できる（90文字までっぽい）
  • 他のフォントと行間やベースラインを揃える : 一度ビットマップに変換されるので全部上書きされる。他のフォントのほうも変換通せばアリかもしれない

FontForge (+ bdfresize + potrace )

https://fontforge.org/en-US/

よく紹介されてるツール。Macだと挙動が中々にあやしいけど機能は豊富
字形の編集は他のピクセルエディタで作成して取り込むか、BDFファイルの作成が必要

画像で字形を編集する場合、
変更したい字形を作る -> 画像を10倍くらいに拡大 -> 対応するグリフを選んで "ファイル -> 取り込み" から画像を背景として取り込み -> "エレメント -> 自動トレース" を実行 といった流れになりそう。

BDFで字形を編集する場合、
（元がTTFなら "エレメント -> Bitmap Strikes Available" からビットマップを生成して出力）-> BDFファイルをFontForgeで開いてポチポチする -> bdfresizeで10倍くらいに拡大 -> FontForgeの新規ファイルで "ファイル -> 取り込み" から拡大したBDFを「背景として取り込み」する -> "エレメント -> 自動トレース" を実行。
こっちは試したけれど、日本語のようなグリフの多いフォントだと処理にけっこう時間がかかる

できること

  • 一部の文字の字形をを少しだけ修正 : できる（けど、多分やや大変）（途中まで試した）
  • 文字を少しだけ追加 : できる（けど、多分やや大変）（途中まで試した）
  • 他のフォントと行間やベースラインを揃える : できる

potrace

https://potrace.sourceforge.net/

FontForgeの「自動トレース」機能を有効化するのに必須
これで画像やBDFファイルのビットマップからTTF用のパスデータを生成できる
（自分は最終的にhomebrewで入れた）

Macで動かすにはAUTOTRACEという環境変数にpotraceのパス（homebrewだと/usr/local/bin/potrace）を設定してFontForgeに渡す必要がある

https://qiita.com/homu-konamilk/items/5886f3e48ffa658f4f78 を参考に↓のようなファイルを作って~/Library/LaunchAgents/fontforge-setenv.plist に置いといた

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
  <dict>
    <key>Label</key>
    <string>fontforge-setenv</string>
    <key>ProgramArguments</key>
    <array>
      <string>/bin/launchctl</string>
      <string>setenv</string>
      <string>AUTOTRACE</string>
      <string>/usr/local/bin/potrace</string>
    </array>
    <key>RunAtLoad</key>
    <true/>
  </dict>
</plist>

bdfresize

http://openlab.ring.gr.jp/efont/dist/tools/bdfresize/

BDFのフォントサイズを大きくするコマンドラインツール
http://blawat2015.no-ip.com/~mieki256/diary/201905271.html を参考にcharresize.cだけ直して
./.configure -> make -> make install としたらMacでも入れられた

入れたら bdfresize -b 1 -f [拡大率] [元のBDFファイル] > [出力するBDFファイル] で変換

むじむじ

そもそもフォントのこと

フォント全体の大きさを決めるUPMという値があって
ベースラインの位置、行間、カーニングなどの値は全部UPMのうちいくつ、みたいな決まり方らしい

Glyphs Miniだとこんな感じ

FontForgeだともうちょっと色々変えられる

ピクセルフォントの場合、もとのTTFのUPMがドット数の等倍（10pxなら1000、12pxなら1200など）だったら色々と楽に調整ができるのだけど、1024とかそうでもない数値だと計算が大変
FontForgeでUPMを変更すると行間などの値も拡縮してくれるが、Floatじゃないのでズレを直せるかというとそんなこともなく、こういうケースはオリジナルに近いBDFのほうが助かるかもと思うなど

このスクラップは2022/12/19にクローズされました