33

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

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

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

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

とにかく、これに関するどんな助けも大いに感謝されます。fontforgeを入手して学習を開始しようとしています（フォント作成用のより優れた無料ソフトウェアがある場合は、お知らせください）。うまくいけば、これはうまくいきます。

4

2 に答える 2

68

私は自分のウェブサイト用にいくつかのアイコン フォントを作成することに成功しました。このハウツーで概説されている Inkscape FontForge のアプローチは非常に堅実です。また、Inkscape などのソフトウェアの使用に慣れている場合は、これも非常に簡単です。私が取る手順は次のとおりです。

準備 (この例では Inkscape を使用)

  1. デザインを含む Inkscape ドキュメントを開きます。
  2. すべての形状、タイプ、および線をパスに変換したことを確認し、アウトライン モードで描画を確認してください。問題が発生した場合は、いつでもこのベース ファイルを参照して、形状に最初の変更を加えることができます。
  3. New > fontforge_glyphを選択して、新しいドキュメントを作成します。
  4. デザインから新しいドキュメントにアイコンを貼り付けます。
  5. 提供されたスペースに合わせてアイコンのサイズを変更します (ただし、最初に元のデザイン ドキュメント内のすべてのアイコンのサイズを変更するのが最適な場合がありますが、自由に変更できます)。
  6. 整列ツール (適切な場合) を使用して、アイコンをページの中央に配置します。
  7. 図面をプレーンなSVG として保存します (たとえば、割り当てられる文字に従ってタイトルを付けると簡単です"j.svg" )。
  8. 他のアイコンについても繰り返します。

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

グリフの作成 (FontForge を使用)

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

フォントの作成 (FontForge を使用)

  1. FontForge に戻り、すべてのアイコンを追加したら、書体に名前を付ける必要があります。メイン ウィンドウで、[要素] > [フォント情報]を選択します。
  2. 以下を変更します。
  • Fontname : MyFontMedium * Family name : My Font *人間の名前: My Font Medium * Weight : Book (Win XP では medium = bold と見なされるため、Book を使用するのが最適です)
  1. メイン ウィンドウで、[ファイル] > [フォントの生成] を選択し、TrueType に保存します (エラーは無視します)。

フォントの検証/変換

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

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

于 2012-11-29T21:45:42.987 に答える
8

これがあなたがやろうとしていることのオープンソースの例です：

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

それらのコードを見ると、CSSを実行する方法がわかります。

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

また、フォントを編集する場合は、 FontAwesome.ttfをダウンロードして、FontForgeで編集します。独自のTTFを実行したい場合は可能ですが、見てみて、彼らがどのように実行したかをコピーしてください。

（免責事項：私はプロセスのこの部分を実行していません。私たちのチームでは、誰かが独自のMacアプリを使用してフォントを考え出します。将来、独自のアイコンフォントを実行する必要がある場合は、おそらくInkscapeを使用します。 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;
}

#myiconfont-regularsvg定義の後のビットを変更しなければならない場合があります。

于 2012-10-11T02:48:13.040 に答える