web-dev-qa-db-ja.com

.svgファイルをフォントに変換する方法は？

誰かが.svgファイルをフォントファイルに変換するのを手伝ってくれますか？またはその場でそれを行う方法はありますか？

cssfontssvg
28
Shoaib Ud-Din

ここで、スタックオーバーフローに関する2つの関連する答えを見つけました。

  1. ベクターソフトウェア（つまり、inkscape）とfontforgeを使用してアイコンフォントを作成しますか？
  2. svgをttfに変換するツール[終了]

残念ながら、どちらもcoding答えではありません。これは私が本当に望んでいたものです（スクリプト化された変換用のコマンドラインユーティリティ、またはおそらく誰かが使用するAPIそのようなことを書くことができます）。

それでも、私はこれらの2つの答えを組み合わせることで、探していたものを手に入れました。

SVGをクリーンアップする

（この手順はオプションの場合があります。） フリーソフトウェアプログラム InkScape でSVGを開きます。既存のSVGをコピーし、FontForge Glyphテンプレートから新しいプロジェクトを作成します。そのテンプレートに貼り付けて、外観、サイズ、および位置を標準化し、1文字につき1ファイル（「グリフ」）としてPLAIN SVGとして保存します。

SVGをフォントに変換する

次に、フリーソフトウェアプログラム FontForge を直接使用するか（最初の回答で指示されているように、 ベクターソフトウェアでアイコンフォントを作成する ）、またはフリーソフトウェアを使用します。 IcoMoon オンラインサービス（2番目の回答、 svgをttf に変換するツールで指示されているとおり）。後者をやりました。

IcoMoonを使用する

IcoMoonはかなり簡単なツールです。ページの上部にある紫色のアイコンのインポートボタンをクリックして、各カスタムSVGグリフをインポートします。次に、セットの設定で「情報を見る」をクリックして、セットに名前を付けてメタデータを指定できるようにします。 「編集」ツール（鉛筆アイコン）を使用し、各グリフをクリックして、サイズと間隔を適切に調整します。

完了したら、フォントに使用するすべてのグリフを選択し、ページの下部にある[フォントの生成]ボタンを押します。結果の画面で、各グリフをUnicode文字にマップできます。右側では、文字を入力または貼り付けることができます。左側では、16進コードを入力できます。 GNOME Character Map （Linuxの場合）または Windows Character Map または Mac OS Character Palette のようなプログラムは、グリフに適切なコードを見つけるのに役立ちます。

次に、画面上部の[設定]ボタン（または右下の歯車）を押して、新しいフォントの名前とメタデータを確定し、右下の[ダウンロード]を押します。 Fontname.Zipファイルを取得します。このファイルには、使用方法の提案とフォントファイル自体が含まれています。

繰り返す

サイズと間隔を正しく設定するのは本当に難しいことがわかりました（文字を作成していました）。私はIcoMoonで繰り返し、フォントをインストールし、自分の文字を類似のフォントの文字と比較しました（ワードプロセッサを使用）。サイズ変更は簡単にできましたが、間隔はそれほど簡単ではありませんでした（そして、 ligatures または kerning ！をいじることもありませんでした！）。一部のシステムでは、新しいフォントをインストールした後にフォントキャッシュをフラッシュする必要があることを忘れないでください（Linuxではfc-cache from Fontconfig ）

フォントを検証する

フォントを検証することもできます。 Font Squirrel は、それを可能にするオンラインサービスであり、修正と使用のヒントを提供します。 IcoMoonはすでにこれを行っていると思うので、おそらくそれはFontForgeの作成にのみ役立つでしょう。

20
Adam Katz

SVGファイルをアップロードし、それらをアイコンフォントを作成するためのアイコンとして使用できる複数のオンラインツールがあります。個人的には、Icomoon Appを好みます。

Icomoonアプリでは、次の各操作を実行できます。

  • いくつかの一般的なアイコンフォントから1つ以上のアイコンを取得します
  • 他のフォントをアップロードします。これは、アイコンフォントでも通常のフォントでもかまいません
  • アイコンとして使用するSVGファイルをアップロードする
  • 任意の数の利用可能なフォントから任意の数のアイコンを組み合わせます
  • 必要な文字に対応したUNICODE 16進値を設定します
  • 作成したフォントセットをエクスポートまたは保存します。

Icomoon

11
John Slegers

他の人が書いたように、svgシェイプをFontForgeにインポートすることが可能であり、一部のフォントデザイナーはこの方法で動作します。

ただし、シェイプ（アウトライン）は現代のスマートフォントの一部にすぎないため、それだけでは不十分です。また、メタデータ、カーニング、ヒントなどにも取り組む必要があります。これは間違いなく面白くなく、ハードですが、必要なものです。一方、フォントデザイナーになるのは、通常、エゴに報いる芸術的な描画などです。

それが、svgフォントがフォーマットとして追いつかない理由の1つです。テキストをレンダリングするのに役立つほど多くの部分が欠落しています。

1
nim

SVGtoFont を試すこともできます。すべての一般的なフォント形式（woff、woff2、ttf、eot）、css（SASS＆LESS）、デモHTMLファイルを提供します。

1
Sahil Gupta