我應該使用字體圖標還是精靈圖像？

我應該使用字體圖標或精靈圖像來獲得更好的性能？什麼將加載更快，重量輕？我應該使用字體圖標還是精靈圖像？

您使用的字體圖標或精靈圖像時，你有很多的小的獨立的圖像，你基本上他們捆綁成一個圖像，這樣一個請求做是爲了讓所有的圖像。

那些通常被用於小圖標的按鈕，或者在導航欄的圖標，以及類似的東西。有關頂部（粗體，斜體等），例如StackOverflow上的編輯按鈕可能會使用到的字體圖像爲：

試想一下，你不得不加載像10個不同的圖像只是該案件按鈕欄，這將是非常低效的。

另一個例子是emojies。有數以千計的表情符號，想象一下，如果你必須在單獨的請求中加載它們中的每一個。

目前與現代的網站，通常字體圖標比精靈圖像中使用更多。

這也降低了服務器負載。這一切都是出於提高效率的目的，因爲我們有時使用小圖像來表示按鈕而不是文本。

2017-07-08 13:23:08 OverCoder

感謝您寶貴的評論，這是真正有用的。但遺憾的是，現在我無法對您的評論投票，因爲我沒有那麼多的聲譽。 –

@AnupMishra沒關係:) – OverCoder

幹得好。很多細節+一個很好的解釋！我會爲此贊成你。 –

有兩個關鍵點，我覺得圖標字體可以有一個優勢：

當你有一組圖標，你」 d喜歡在給定的項目上使用，圖標集合越大，圖標字體的整體文件佔用空間就越小。

談起演出，最近的一次測試中，我一組約30圖標製作的過程中，圖標字體可以比精靈圖像達到約240％的推動。另外，圖標字體的工作時間可以追溯到IE6。

在另一方面，矢量圖標可以調整大小上下而不失品位，對視網膜顯示額外的銳利。它也可以支持多色圖標。

我建議this後任何進一步的參考。

希望這可以幫助， L.

2017-07-08 13:32:57

雪碧圖像不是明確的矢量。你從哪裏得到那個'240％'百分比 – OverCoder

這是事實，精靈沒有明確的嚮導。在最近的一個項目中，我使用IcoMoon工具生成了29個圖標的圖標字體。該工具允許導出與SVG sprite相同的設置。圖標字體是7kb SVG精靈是17kb 這是性能增加約240％ –

是的，但基本上你可以得到更低或更高的收益，取決於許多因素，也許你應該說你得到了'240％在你的測試**中的文件大小改進**。許多人可以開始將其作爲一般性措施。另外我也不知道較老的IE不支持精靈圖像，今天我才知道。 – OverCoder

回答