web-dev-qa-db-ja.com

アイコンのフォントよりもpngを使用することで具体的な利点はありますか?

最近、いくつかの主要なWebサイト(このようなWebサイト)がアイコンを表示するためにフォントが素晴らしいプロジェクトや類似のプロジェクトを使用していないことに気付きました。むしろ、PNGを使用します。

この理由はありますか?互換性の点で違いはありますか?

Font-awesomeをフォントとして使用せず、アイコンをPNG/SVGに変換することは理にかなっていますか(例 https://github.com/encharm/Font-Awesome-SVG-PNG ) ?

2
John

PNGを使用する主な利点の1つは、複数の色でアイコンを表示することです。また、IE 6を介して透過PNGで問題が発生しますが、古いブラウザーでも十分にサポートされています。

良い比較のために、StackOverflowで font icons vs png icons をチェックすることをお勧めします。

3
modiX

pngをマージして(サイトのすべてのpngを1つの大きなpngに)、サイズを最適化できます。この機能を自動化するコンパス( http://compass-style.org/ )のようなツールがあります。次に、画像を画像位置で呼び出して、目的の画像を目的のスタイルで表示します。例えば、私は600koのアイコンを使用し、それがマージされると111koを実行し、ブラウザのキャッシュを使用する場合、サイト全体で1つのアイテムのみをキャッシュする必要があります。

例: http://compass-style.org/help/tutorials/spriting/

1
Froggiz

2015年にpngの使用を開始する理由がわかりません。大規模なWebサイトは、大規模なコードベースを持っているという理由だけで、通常、新しいテクノロジを採用する最初のWebサイトではありません。

Pngと言えば、スプライト形式であっても、もはや良い選択肢ではありません。ディスプレイのサイズごとに異なるサイズが必要だからです。ベクター形式、完全なsvgまたはフォントの実装により、同じサイズのグラフィックをあらゆるデバイスサイズで鮮明かつ鮮明に表示できるので、作業が楽になります。

0
Nick