13

私はラベルにアイコンを使用していますが、このウェブサイトを見ました:www.fontello.comアイコンでフォントを作成できます。

しかし、アイコンを使用してフォントを作成すると、すべてのアイコンよりも大きくなります.svg、ttf、woff、およびeotがあるため、その4つのフォントはすべてすべてのpngアイコンよりも大きくなります。

@font-face {
  font-family: 'fonticons';
  src: url("../font/fonticons.eot");
  src: url("../font/fonticons.eot?#iefix") format('embedded-opentype'), url("../font/fonticons.woff") format('woff'), url("../font/fonticons.ttf") format('truetype'), url("../font/fonticons.svg#fonticons") format('svg');
  font-weight: normal;
  font-style: normal;
}

私のアイコンはすべて optipng 圧縮された .png 画像です。

これはすべてのブラウザで機能しますか?

では、なぜこのフォント メソッドを使用する必要があるのでしょうか。

そして、の代わりはありfontello.comますか？

4

5 に答える 5

18

良い質問。私は現在、Fontelloとフォントアイコンを試し、それが実行可能なアプローチであるかどうかを確認しています。

それは実行可能なアプローチです。私は本番アプリケーションでフォントベースのアイコンを使用し、ほぼすべての一般的なブラウザー/デバイスでテストしました（FontelloにはIE7をサポートする例もあります）。Fontelloについて言えることは良いことだけですが、好きなツールを使用できます。

フォントアイコンは、任意の（比例した）寸法に合わせて拡大縮小でき、任意のピクセル密度で機能します。高密度ディスプレイ（Apple Retinaなど、すべてのモバイルデバイスでますます人気が高まっている）でサイトを見ると、ラスター形式（PNGなど）とベクター形式には大きな違いがあります。

すべてのアイコンを（スプライトのように）単一のファイルで定義できますが、スプライトとは異なり、ファイル内のアイテムのサイズについて心配する必要はありません。さらに、ファイル内の他のアイテムから独立して各アイテムをスケーリングできます。

考慮事項

  • フォントファイルを管理する必要があります。これらは人間が読める形式ではないため、ツールを使用する必要があります。
  • 維持するCSSセレクターが関連付けられています（通常、アイコンごとに1つのセレクター）。
  • 特定の効果を達成したり、問題を修正したりするために、追加のマークアップが必要になる場合があります。
  • マイナーなサイズの問題。すべてのアイコンがボックスを均一に埋めるわけではなく、各ブラウザのテキストレンダリングの特異性の影響を受けます。

これらの考慮事項は、スプライトを使用したり、すべてのアイコンに対して両方のPNG/SVGを作成したりするよりもおそらく作業が少なくて済みます。

フォントアイコンには色情報が含まれていないことに注意してください。ただし、他のテキストと同じようにスタイルを設定できます。これには、コメントで指摘されているように、ARGBカラーの使用とより高度なCSS効果の適用が含まれます。

ファイルサイズに関しては、ブラウザが4つのフォント形式すべてをダウンロードすることはほとんどないことに注意してください。正しく実行されます。通常、ダウンロードされるのは1つだけです。

別のアプローチは、アイコンにSVG（SVGフォントではない）を使用することです。SVGのブラウザーサポートはのサポートよりも少ない@font-faceため、ラスターフォールバックが必要になります。

于 2012-09-20T14:26:13.013 に答える
4

この便利なサイトでは、CSS 機能がどのブラウザーでサポートされているかを示しています。この場合、< IE9 では問題が発生する可能性があります。

http://caniuse.com/#feat=fontface

個人的には、UI 要素に CSS スプライトを使用して、ブラウザー間での一貫性を確保することを好みます。

于 2012-09-20T14:20:39.173 に答える
4

簡単な免責事項: 私はpictonicと呼ばれるアイコン フォント ライブラリに取り組んできました。

アイコンでフォントを作成すると、svg、ttf、woff、およびeotがあるため、すべてのアイコンよりも大きくなります.4つのフォントはすべて、すべてのpngアイコンよりも大きくなります。

ファイルサイズに関しては、次の png フォントとアイコン フォントの比較が興味深いかもしれません。

http://blog.pictonic.co/post/32260064131/icon-fonts-could-speed-up-your-page-loading-time-by-14

トレースを使用して、アイコンがベクター形式に変換されていることを確認する必要があります。svg などの多くのベクター形式はビットマップもサポートしているため、アイコンがビットマップとしてインポートされている場合、アイコンをベクター化されたフォントに変換することによるファイルサイズ関連のメリットはまったくありません。

私の経験では、16x16 ピクセルであっても、ttf フォントは 20 個程度のアイコンを合わせたファイルサイズよりもはるかに小さくする必要があります。画像サイズが大きくなると、ベクターのファイルサイズはすべての縮尺で同じになるため、このギャップは広がります。

これはすべてのブラウザで機能しますか?

使用する方法によって異なります。pictonic は ie5 までのすべてのブラウザーでテストされていますが、古い ie バージョン (5-7) には少しの js が必要です。したがって、理論的には、アイコン フォントをすべてのブラウザで動作させることは可能です。

では、なぜこのフォント メソッドを使用する必要があるのでしょうか。

アイコン フォントは非常に用途が広いため、CSS を使用して、イメージ アイコンが柔軟性に欠けるように見える方法で操作できます。ここにデモがあります: https://pictonic.co/#main-demo

たとえば、数行の css だけで、レイアウトを試して、すべてのアイコンの色、サイズ、および影を変更できます。これはかなり便利です。

また、それらはベクターベースであるため、箱から出してすぐに Retina に対応しているため、Apple Retina ディスプレイ (Retina macbook、iphone 4+、ipad3+) のような Retina スクリーンで見事に表示されますが、画像を二重にスワップするにはメディア クエリが必要です。さらに多くのスペースを占める解像度バージョン。

適切な形式を使用すれば、かなり効率的だと思います。

fontello.com の代わりになるものはありますか?

pictonic にはまだユーザーが生成したアイコンをインポートする機能がありませんが、かなり大きな無料のアイコンセットを含む 2000 を超える見事なアイコンからカスタム アイコン フォントを生成できます。随時追加していきますので、ぜひご覧ください

于 2012-09-26T13:46:57.947 に答える
2

別の代替案は次のとおりです。 http://fontastic.me/

;)

于 2013-07-09T20:28:13.247 に答える
1
  1. フォント アイコンには、拡張子が .woff、.ttf、.eot、.svg のフォント ファイルとそのフォントの css ファイルを含めます。サイズが小さく、必要に応じてアイコンのサイズを変更できます。画像ファイル png/jpeg を使用すると、画像ファイルが歪んでしまいますが、フォント アイコンは適切にスケーリングされます。
  2. 複数の画像を使用すると、サーバーに対して複数の http 要求を行う必要がありますが、ここでは回避できます。
  3. フォント アイコン ファイルは cdn でも利用できるため、以前の Web サイトで既にブラウザーにキャッシュされている場合は、サーバーから要求する必要はありません。
  4. fontello を使用すると、必要なアイコンのみをカスタマイズして使用できます。
  5. フォント アイコンを取得できる fontawesome の現在のバージョン 4.2 もあります。古いバージョンのブラウザーのサポートが必要な場合は、古いバージョンの 3 を選択できます。
  6. LESS/SASS を使用してカスタマイズすることもできます。
  7. 別のオプションは、従来の方法またはオンライン サービスを使用して最適化できる css スプライトを使用することです。
  8. HTMLでそれを使用するのは非常に簡単です.cssファイルとフォントファイルがブラウザにロードされていることを確認したら、html要素にクラス名を追加するだけでよいので、フォントサイズ、色をカスタマイズできます、希望に応じて背景色。

素晴らしいフォント

フォンテッロ

ここでCDNを見つけることができます

于 2015-01-15T14:30:00.870 に答える