web-dev-qa-db-ja.com

ベクターソフトウェア（つまり、inkscape）とFontForgeでアイコンフォントを作成しますか？

ここでいくつかの答えといくつかの調査を取得することで、アイコンを実装するための新しいアプローチに出会いました。画像やcss背景としてではなく、フォントとしてアイコンにアプローチできるようです。

この方法は、最終的に、各アイコンが文字に割り当てられた1つのファイルフォントセットを作成することを意味しますか？このメソッドは私にとって非常に新しいため、最初に正しくアプローチすることを本当に望んでいます（異なるアイコンを作成し、それぞれを異なる色とサイズごとに独自の.pngファイルとしてエクスポートするよりもはるかに優れています...）.

その場合は、少し覚える必要があります（特に26を超えるアイコンがあるため）。 FontForgeの経験が豊富な人のために、特定のWord =文字を言う方法はありますか？

また、ウェブサイトでこれを実装することに関して。次に、CSSクラス/ ID内でフォントタイプを指定する必要があります（つまり、font = icons;）。そして、CSSでもサイズ、色などを変更できますか？男、これが本当に本当なら。もっと早く発見したい...時間と時間を節約できたはずです。

とにかく、これに関する助けは大歓迎です。 FontForgeを入手して学習を開始しようとしています（フォント作成用のより良いフリーソフトウェアがある場合はお知らせください）。うまくいけば、これでうまくいく。

fontssvgtrue-type-fontsinkscapefontforge
28
jstacks

this how-to に概説されているように、私のWebサイトとInkscape FontForgeアプローチ用にいくつかのアイコンフォントを作成しました。Inkscapeなどのソフトウェアの使用に慣れている場合は、とても簡単です。手順は次のとおりです[〜＃〜] i [〜＃〜]の実行：

準備（この例ではInkscapeを使用）

  1. デザインを保持しているInkscapeドキュメントを開きます。
  2. すべての形状、タイプ、線をパスに変換し、アウトラインモードで図面を確認してください。 問題がある場合、いつでもこのベースファイルを参照して、形状に初期変更を加えることができます。
  3. New> fontforge_glyphを選択して、新しいドキュメントを作成します。
  4. デザインのアイコンを新しいドキュメントに貼り付けます。
  5. 指定されたスペースに合わせてアイコンのサイズを変更します（ただし、元のデザインドキュメント内のすべてのアイコンのサイズを最初に変更することをお勧めします）。
  6. 位置合わせツールを使用して、ページ上のアイコンを中央に配置します（適切な場合）。
  7. 図面をplainSVGとして保存します（たとえば、 "j.svg"）。
  8. 他のアイコンについても繰り返します。

私はしばしばこのプレーンなSVGドキュメントを開いたままにして、新しいアイコンを貼り付け、最後に従ってセンタリングとサイズ変更を行います。これにより、アイコンセット全体でサイズと位置の一貫性が保たれます（プレーンSVGを保存するためにディレクトリを選択し続ける必要はありません）。

グリフの作成（FontForgeを使用）

  1. 各アイコンのSVGファイルを作成したら、FontForgeを開いて新しいFontForgeドキュメントを作成します。
  2. メイングリフ表示リストウィンドウで、アイコンのある文字/数字のいずれかをダブルクリックします。
  3. この新しいグリフウィンドウで、File> Importを選択し、SVGファイルの1つを選択します（ファイルダイアログでファイルフィルターを変更する必要があります） SVGファイルを表示します）。
  4. インポートでエラーが登録され、ワイヤフレームが軽度の爆発に見舞われたように見える場合、Inkscapeに戻ってパスを整理する必要があります。ほとんどの場合に機能する問題を見つける簡単な方法があります：
    • Inkscapeで、アイコンの塗りつぶしを削除します。
    • 細い線を追加します（1pxで可能です）。
    • ストロークをパスに変換します。
    • 結果の形状には、おそらくアイコンの一部が欠けています。
    • すべてを元に戻し、次にアイコンをバラバラにして、問題領域を再描画/トレース/修正します。

フォントの作成（FontForgeを使用）

  1. FontForgeに戻り、すべてのアイコンを追加したら、書体に名前を付ける必要があります。メインウィンドウで、Element> Font infoを選択します。

  2. 以下を変更します。

    • フォント名：MyFontMedium
    • 家族名：My Font
    • 人間の名前：My Font Medium
    • Weight：Book（Win XPは中=太字であるため、Bookを使用するのが最適です）

  3. メインウィンドウで、File> Generate Fontsを選択し、TrueTypeに保存します（エラーを無視します）。

フォントの検証/変換

  1. www.fontsquirrel.com/fontface/generator または同様のサービスに移動してTTFファイルをアップロードし、変換（および修正）します
  2. ダウンロードしたZipファイルには、Webプロジェクトにフォントを実装する方法に関する正確な指示が含まれています。

それが助けになることを願っています。

58
wayfarer_boy

以下は、あなたがやろうとしていることのオープンソースの例です。

http://fortawesome.github.com/Font-Awesome/

それらのコードを見ると、CSSの実行方法を見ることができます。

https://github.com/FortAwesome/Font-Awesome/blob/master/css/font-awesome.css

フォントを編集する場合は、 FontAwesome.ttf をダウンロードしてFontForgeで編集します。独自のTTFを実行したい場合はできますが、見てみて、コピーした方法をコピーしてください。

（免責事項：プロセスのこの部分は行っていません。私たちのチームでは、1人のユーザーが独自のMacアプリを使用してフォントを作成しています。将来的には、おそらくInkscapeとFontForgeを使用するでしょう。FontForgeがSVGをインポートできることを十分に確認しましたが、試していません）。

作業が完了し、TTFフォントを希望どおりに使用できるようになったら、フォントをWebフォントとして使用するために必要なさまざまな形式に変換する必要があります。この無料のオンラインツールを使用します。

http://fontface.codeandmore.com/

...これにより、EOT、SVG、TTF、およびWOFFフォントファイルが提供されます。これは、ほぼすべてのブラウザーで使用できます。次に、上記のリンクファイルに示されているように、これらのファイルをCSSに含める必要があります。注：SVGファイルには、更新する必要があるIDがあります。変換ツールによって自動的に選択されると思うので、SVGを編集し、IDを確認し、それを含める必要があります。

たとえば、次のコードでは：

@font-face {
  font-family: 'MyIcons';
  src: url('myiconfont-iconglyphs.eot');
  src: url('myiconfont-iconglyphs.eot#iefix') format('embedded-opentype'),
       url('myiconfont-iconglyphs.woff') format('woff'),
       url('myiconfont-iconglyphs.ttf')  format('truetype'),
       url('myiconfont-iconglyphs.svg#myiconfont-regular') format('svg');
  font-weight: normal;
  font-style: normal;
}

Svg定義の後に#myiconfont-regularビットを変更する必要がある場合があります。

7
Jason O'Neil