「svg2sfd」の編集履歴(バックアップ)一覧はこちら
「svg2sfd」(2016/08/28 (日) 17:56:50) の最新版変更点
追加された行は緑色になります。
削除された行は赤色になります。
*はじめに
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
* 変換スクリプトのインストール
+ サイトからZIPでダウンロード。展開。
+ サイトに書いてある通り、コマンドプロンプト(DOS窓)でインストール。
- npm install -g svg2sfd
> いろいろ必要なパッケージがあれば自動的に取得するらしい。
<
+ インストール後、nodeとか打って「コマンドが見つからない」以外のエラーが出ればOK。
* 変換元SVGデータの作成
サンプルとして置いてあるsvgファイルをベースにするのがいいかもしれない。
** ドキュメント設定
- ページ カスタムサイズ(16384x10240 px)
- グリッド 128x128 px、メイングリッド8ごと
文字はメイングリッドのマスごとに1文字デザインし、パスの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でフォントファイル化
まだ試していないのでまだ勘。
+ 出力されたsfdファイルをFontforgeで開く
+ エンコーディングやフォント名、ファミリ名など設定してTFFなどご所望の形式で出力
*はじめに
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
* 変換スクリプトのインストール
+ サイトからZIPでダウンロード。展開。
+ サイトに書いてある通り、コマンドプロンプト(DOS窓)でインストール。
- npm install -g svg2sfd
> いろいろ必要なパッケージがあれば自動的に取得するらしい。
<
+ インストール後、nodeとか打って「コマンドが見つからない」以外のエラーが出ればOK。
* 変換元SVGデータの作成
サンプルとして置いてあるsvgファイルをベースにするのがいいかもしれない。
** ドキュメント設定
- ページ カスタムサイズ(16384x10240 px)
- グリッド 128x128 px、メイングリッド8ごと
文字はメイングリッドのマスごとに1文字デザインし、パスのidで割り当てる文字コードを指定する。
もしすでにあるフォントを参照しながら文字コードを設定する場合、&br();
Fontforgeの「表示」→「グリフへのラベル付け」→「Unicodeによる」を選ぶと作業しやすい。&br();
Inkscapeのキャンバスから、グルーピングした1文字ずつ選択し、XMLエディタでidを選択、文字コード入力、Ctrl+Enter。&br();
文字コードは16進数4桁。たぶん大小文字は関係ない。&br();
** その他
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でフォントファイル化
まだ試していないのでまだ勘。
+ 出力されたsfdファイルをFontforgeで開く
+ エンコーディングやフォント名、ファミリ名など設定してTFFなどご所望の形式で出力