🛠️

既存のピクセルフォントを合成・改変してみる

に公開

ピクセルフォントはライセンスによっては一定の条件下で改変が認められているものがあります。

  • ひらがな、カタカナ、英字だけ字形をちょっと変えたい…
  • 他のフォントと組み合わせて使いたいけど余白が合ってなくてズレる…

といった場合にも、改変OKの範囲であれば色々変えることができるのですが、ピクセルフォントは元がビットマップなので、改変するには一般的なフォントと異なる手順を踏む必要があります。(慣れたら逆に改変しやすいのですが)
以下は実際に行った作業の覚え書きです。

ピクセルフォントのファイル形式には大きく分けて

  • TTF・OTF(アウトラインフォント)
  • BDF(ビットマップフォント)

の2つがありますが、字形を改変するにはBDFが、フォント同士をまとめて合成するにはTTFで扱うのが楽だったので、相互に変換するツールを使用する手法をとりました。

TTFとBDFの相互変換

TTFをBDFに変換する

FontForgeを使います。
https://fontforge.org/en-US/

  • エレメント -> Bitmap Strikes Available でフォントの高さに合ったビットマップフォントを生成
  • ファイル -> フォントを出力から、「アウトラインフォントなし」「BDF」形式を指定して出力

ただ、稀に後述のBits'N'Picasで読み込めないファイルになることがあります。何故…
そういう場合はBitFontMaker2というwebツールでファイル読み込み -> TTFにエクスポート -> BDF生成とするとうまくいくケースもありました。
https://www.pentacom.jp/pentacom/bitfontmaker2/

これ単体で簡易なフォント改変も可能ですが、
インポート時にメトリクス設定がリセットされるので要注意。

BDFをTTFに変換する

Bits'N'Picasというソフトを使います。
https://github.com/kreativekorp/bitsnpicas

BDFを開いて File -> Export からTTF形式を選び保存します。

フォントを合成する

TTFで作業します。

  1. 合成元のTTFファイルを用意する

  2. フォントのメトリクスを合わせる

FontForgeを使い、UPMやフォントのベースラインを揃えます
この辺↓や変形メニューでいじります…とても面倒……
https://zenn.dev/link/comments/634593a946c227

  1. フォントのうち必要なグリフだけ残して合成

↓を参考に、FontForgeで必要なグリフ以外を削除して、
エレメント -> フォントの統合 で統合します。
https://aznote.jakou.com/fforge/02_merge.html
https://zenn.dev/catnose99/scraps/e60972980137bb

フォントを改変する

BDFで作業します。

文字ごとの余白を変更する

FontForgeで変えたい文字を選び、メトリック から幅、右の余白、左の余白を変えられます。

字形を改変する

FontForgeで変えたい文字のプレビュー部分をダブルクリックすると編集できます。
メトリックウィンドウでは変えたい文字を一括入力すると変えたい文字だけを見ながら修正できるので便利です
(ウィンドウ -> メトリックウィンドウを開く、から開けます)

便利ツール

zi.tools

正確な字形や、類似する文字を確認するのに非常に便利です
https://zi.tools/zi/亂

FontGoggles

フォントごとの字形のプレビューができます。
https://fontgoggles.org/

こんな感じに、他のピクセルフォントを複数表示することで
字形の比較や不備のチェックを、フォントをインストールせずに行うことができます。

Discussion