svg2sfd

はじめに

InkscapeとFontforgeを使ってフォント(TTFなど)を作ります。

使用するもの

書いてあるVer.などはこちらで導入した環境。

• Inkscape Ver.0.91 r13725
• Fontforge Ver.11:18 AWST 7-Apr-2016
• svg2sfd https://github.com/kei-ito/svg2sfd
  • 実行環境：Node.js v6.4.0

変換スクリプトのインストール

1. サイトからZIPでダウンロード。展開。
2. サイトに書いてある通り、コマンドプロンプト(DOS窓)でインストール。

• npm install -g svg2sfd

  いろいろ必要なパッケージがあれば自動的に取得するらしい。

1. インストール後、nodeとか打って「コマンドが見つからない」以外のエラーが出ればOK。

変換元SVGデータの作成

サンプルとして置いてあるsvgファイルをベースにするのがいいかもしれない。

ドキュメント設定

• ページ　カスタムサイズ(16384x10240 px)
• グリッド 128x128 px、メイングリッド8ごと

文字はメイングリッドのマスごとに１文字デザインし、パスのidで割り当てる文字コードを指定する。

もしすでにあるフォントを参照しながら文字コードを設定する場合、
Fontforgeの「表示」→「グリフへのラベル付け」→「Unicodeによる」を選ぶと作業しやすい。
Inkscapeのキャンバスから、グルーピングした1文字ずつ選択し、XMLエディタでidを選択、文字コード入力、Ctrl+Enter。
文字コードは16進数4桁。たぶん大小文字は関係ない。

その他

svgファイルをテキストで開くかXMLエディタで要素を追加していく。

• ルートにあるsvgノード(id="svg2")に以下の属性を追加
  • sfdSplineFontDB="3.0"
  • sfdEncoding="ISO8859-1"
  • sfdPadding="50"
  • sfdDescent="256"
• svg(id=svg2)→sodipodi:namedview(id=base)→inkscape:grid のidを変更
  • id="grid**"→id="glyph"
• パスがぶらさがっているinkscape:g要素を開く
  • gタグの開きと閉じのタグ行を削除。<path **>がルートの<svg>にぶら下がるように修正する

変換

• コマンドプロンプト(DOS窓)でパスを渡す。
  • svg2sfd input.svg

変換成功とか出ないのでわかりにくい…

Fontforgeでフォントファイル化

まだ試していないのでまだ勘。

1. 出力されたsfdファイルをFontforgeで開く
2. エンコーディングやフォント名、ファミリ名など設定してTFFなどご所望の形式で出力