FontForgeにSVGを読み込む：描いた図形をグリフの輪郭へ
SVG図案をFontForgeのグリフ枠へ読み込み、輪郭、ベースライン、縮尺、字間を確認します。トレースで得られるものと、フォント設計として必要な作業を解説します。
目次
FontForgeへSVGを読み込むには、目的のグリフ枠を開き、File → Importを選んで形式をSVGへ変え、ファイルを指定します。結果は、そのグリフの編集ウィンドウ内の輪郭形状になります。使えるフォントを生成する前に、位置、サイズ、輪郭、字間を確認する必要があります。
元データが絵の場合、この区別が重要です。トレースはピクセルから図形を復元できますが、書体の意図したベースライン、送り幅、字間のリズムは決められません。1つのグリフから始め、これらの確認を終えてからアルファベット全体を読み込みます。
フォントウィンドウを開くだけでなく、グリフ枠へ読み込む
新しいFontForgeドキュメントを作るか作業中のフォントを開き、編集したい文字の枠をダブルクリックします。そのアウトラインウィンドウ内のFile → ImportからSVGを読み込みます。最初にビットマップ形式が一覧に出る場合は、形式フィルターをSVGへ切り替えます。これはFontForgeの輪郭読み込みチュートリアルに記載された手順です。
まず読み込み先を確認します。オリジナルの小文字gを追加するなら、目的のg枠を編集していることを確かめます。g.svgというファイル名は、グリフと文字への割り当てを確認する代わりにはなりません。既存の輪郭を置き換える前に、フォントのコピーを保存してください。
読み込んだら点を1つ選び、編集可能な輪郭があることを確認します。トレースの参考として表示される画像しかないなら、同じ結果には達していません。FontForgeのFileメニューの説明は、画像の読み込み、グリフの輪郭、フォントファイルの操作を区別しています。
このガイドの目的は、通常のアウトラインのグリフです。特殊な多層構造やカラーフォントの手順には追加の要件があります。ブラウザーで使えるイラストが、自動的にそうしたフォントになるわけでもありません。
元のベクターがあるなら使う
ベクターエディターでグリフを描いたなら、その図案を直接準備します。元の輪郭を残し、別の読み込み用コピーを作り、対応しない表示上の機能をそこで簡略化します。既存のベクターを画像にして再トレースすると、すでに制御できる図形が変わる可能性があります。
元データがラスターの絵や生成した記号なら、PerfectVectorで画像をベクターパスへ変換し、SVGを調べます。編集の出発点となる輪郭が得られます。グリフのメトリクス、字間、フォントとしての動作を作る場所は、引き続きFontForgeです。
手描きのデザインには、明瞭でコントラストの高い元画像を選びます。隣の文字や紙の不要物は切り抜きますが、アセンダーやディセンダーはすべて残します。手描き文字のベクター化ガイドは元画像の準備を扱い、画像ベクター化の解説は変換で実際に何が作られるかを説明しています。
トレースした文字は、まだ図案の形状です
広いカウンターと明瞭なディセンダーのあるオリジナルの小文字gのラスター画像を用意し、PerfectVectorで変換しました。未加工のSVGには3本の閉じたパスがありました。ほぼ白いキャンバス背景、黒い文字のシルエット、ほぼ白いカウンターの図形です。埋め込み画像はありませんでした。
白いカウンターは黒いシルエットの上に塗られていました。完成したフォントグリフの内側の輪郭ではありません。白い図形だけを削除すると、下の黒い塗りが現れます。読み込み用コピーでは、確認済みの背景を削除し、グリフの塗りを判断する前にカウンターを本当の開口部にしてください。
比較図は、確認した輪郭の証拠であり、FontForgeでの試験ではありません。この出力には、ベースライン、emサイズ、送り幅、カーニングを設定していません。整って見えるディセンダーは、絵がどこまで伸びるかを示しますが、フォントのベースラインがどこかは決めません。
メトリクスを調整する前に輪郭を明確にする
変更していないSVGと、別の作業用コピーを残します。作業用コピーでは、無関係な背景図形を削除し、見える太さがグリフを定義するストロークを塗りのある輪郭へ変換し、マスクやクリップによる効果を残したい実際の形状に変換します。FontForgeはSVGの一部に対応しており、読み込みのリファレンスがその範囲を説明しています。
カウンターのある文字では、外側と内側の両方の境界を調べます。それらが意図した塗り領域を表す必要があります。白い重ね図形は白いページで見た目を再現できても、フォントに必要な輪郭構造を与えるとは限りません。
準備した図案を読み込んだら、開いた端点、意図しない重なり、自己交差を確認します。Element → Correct Directionは、外側と入れ子の輪郭の向きを交互に設定しますが、スプラインが交差していると予想外の結果になる場合があります。コマンドを信頼する前に交差を解消してください。FontForgeのElementメニューのリファレンスには、この制限が記載されています。
目標ノード数だけを基準に簡略化しないでください。絵を特徴づける角、端部、曲線を保ちます。SVGの過剰なノードのガイドはノイズのある輪郭の診断に役立ちますが、フォントの輪郭には、実際に読まれるサイズでの文字デザイン上の判断も必要です。
高さを判断する前にベースラインを合わせる
読み込んだ図案は、小さすぎる、大きすぎる、意図した原点からずれる場合があります。グリフの点をすべて選び、まとめて移動または拡大縮小します。FontForgeの読み込みチュートリアルでは、輪郭を所定の位置へ移動し、Element → Transform → Transformで均等に拡大縮小する方法を説明しています。
小文字gの最下点をベースラインに合わせないでください。それはディセンダーの点です。文字の本体を目的のベースラインとxハイトに合わせ、ディセンダーをその下に置きます。同じデザインの近隣の小文字がすでにあれば、それと比較します。
さらに文字を準備するときは、一貫した元の座標系を使います。FontForgeのチュートリアルは1,000単位の手順を示し、Design With FontForgeの読み込みガイドはSVGの縦座標とアセント、ディセントの関係を説明しています。これは連携した設定の手順として扱い、すべての既存SVGを正方形に引き伸ばす規則とは考えないでください。
em当たりの単位数が異なるフォントには、それに合う計画が必要です。同様に、各文字をぴったり切り抜いて高さの異なるSVGページにすると、一貫した配置に必要な共通の基準を失う場合があります。残りを処理する前に、1〜2個のグリフでその基準を確立します。
文字の並びの中で字間を設定する
文字の見える幅と送り幅は別です。送り幅は次の文字の開始位置を決め、輪郭の周囲の空間は単語のリズムに関わります。
WindowメニューからMetricsウィンドウを開き、グリフを他の文字と並べて確認します。FontForgeのメトリクスのチュートリアルは、輪郭の移動による左サイドベアリングの変更と、送り幅の線による右サイドベアリングの変更を説明しています。
最初のgでは、gg、ng、goなど、すでに描いたグリフとの繰り返しや短い組み合わせを比較します。輪郭だけでなく、空間を見てください。適切でない既定のサイドベアリングをすべてカーニングで補おうとせず、まず通常の隣接文字で妥当な字間を作り、その後で例外的なペアを扱います。
SVGページで中央に見えるグリフも、テキストでは不自然な位置になる場合があります。逆に、左右の数値上の空間が等しくても、見た目に適切な字間とは限りません。SVGの境界範囲は形状の参考として使い、フォントは文字列の中で判断してください。
検証して試験用フォントを生成する
フォントファイルを生成する前に、編集可能なFontForgeプロジェクトを保存します。Saveは作業用の元データを残し、Generate FontsはTrueTypeやOpenTypeなどのフォント形式を作ります。確認と生成のチュートリアルは、その違いを説明しています。
準備したグリフにElement → Find Problemsを実行します。すべての推奨変更を自動的に採用せず、報告された問題を確認してください。FontForgeは、検出項目の一部が意図したデザイン上の選択を反映する場合があると説明しています。その後、グリフを目で再確認します。
試験用フォントを生成し、実際に使いたいアプリケーションで試します。小さい文字サイズと大きい文字サイズの両方で、文字への割り当て、カウンター、ベースライン、ディセンダーの余裕、字間を確認します。まだ小規模な試作なら、試験範囲を明確にしてください。1つの輪郭の読み込みに成功しても、書体全体が完成したとはいえません。
よくある質問
FontForgeでSVGのサイズや位置が違うのはなぜですか？ 元の座標やページ寸法が、フォントのemやベースラインの設定と合っていない可能性があります。読み込んだ輪郭を一貫した方法で移動・拡大縮小し、さらにグリフを準備する前に共通の座標計画を決めます。
PerfectVectorは絵から完成したフォントを作れますか？ PerfectVectorはラスター図案をベクターパスへ変換します。グリフの輪郭、文字への割り当て、メトリクス、字間、生成するフォントファイルの準備には、フォントエディターが必要です。
文字のカウンターが埋まるのはなぜですか？ 開口部に見えるものが白い重ね図形か、内側の輪郭が存在するか、輪郭の向きや交差の修正が必要かを確認します。元のSVGが白いページでどう見えたかに頼らず、準備したグリフの塗りを調べてください。
SVGの文字をすべて一度に読み込むべきですか？ まず代表的なグリフを1つ仕上げます。縮尺、ベースライン、輪郭、字間を確認してから、残りの文字へ一貫した準備方法を適用します。一括読み込みがそうした設計値を決めることはありません。
参考資料
- FontForgeの輪郭読み込みチュートリアル — グリフ枠への読み込み、配置、均等な拡大縮小、連携した元データ寸法。
- FontForgeのFileメニュー — 読み込み形式、SVG対応、元データとフォントファイルの操作の違い。
- FontForgeのElementメニュー — 輪郭の向きの修正と、交差に関する制限。
- Design With FontForge：グリフの読み込み — SVG座標、アセント、ディセントの設定。
- FontForgeのメトリクスのチュートリアル — サイドベアリング、送り幅、文字の並びの中での字間、カーニング。
- FontForgeの確認と生成のチュートリアル — 問題の確認と、使えるフォント形式の生成。
最初のグリフがピクセルでしか存在しないなら、絵を編集可能なベクターへ変換し、カウンターと外側の輪郭を確認してから、そのグリフをFontForgeで仕上げてください。正しく配置し、字間を設定して試験した輪郭は、残りのフォントの有用な出発点になります。
