字體圖標和PNG圖標

我使用標籤圖標，但我看到了這個網站：www.fontello.com您可以在其中創建帶有圖標的字體。字體圖標和PNG圖標

但是，當我創建帶有圖標的字體時，它比我的所有圖標都大，因爲有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的任何替代方法？

來源

2012-09-20 Mirza Delic

兩個*精靈地圖*和*符號字體作爲圖標*都有各自的優點和缺點。對於用戶而言，下載單個文件對於下載多個微小圖像要好得多，即使所有微小圖像的組合文件大小都小於單個文件。 – cimmanon

好問題。 ~~我目前正在試驗Fontello和字體圖標以查看它是否可行。~~

這是一個可行的方法。我在生產應用程序中使用了基於字體的圖標，並在幾乎所有流行的瀏覽器/設備上進行了測試（Fontello甚至支持IE7的例子）。我對Fontello只有很好的評價，但你可以使用任何你想要的工具。

字體圖標可以縮放到任何需要的比例尺寸和可以處理任何像素密度。如果您在高密度顯示器（如Apple Retina，以及在所有移動設備上越來越受歡迎）上查看您的網站，則光柵格式（如PNG）和矢量格式之間存在巨大差異。

您可以在單個文件（如精靈）中定義所有圖標，但與精靈不同，您不必擔心文件中項目的尺寸。此外，您可以獨立於文件中的其他項目縮放每個項目。

考慮

您將需要管理的字體文件。這些不可讀，因此您需要使用工具。
有關聯的CSS選擇器要維護（通常每個圖標一個選擇器）。
爲了達到特定的效果或解決問題，偶爾需要額外的標記。
小尺寸問題;並非所有圖標均勻地填充框，並且它們受到每個瀏覽器的文本渲染特性的影響。

這些考慮可能比使用精靈或爲每個圖標創建PNG/SVG都要少。

請記住，字體圖標不包含任何顏色信息。但是，您可以像任何其他文本一樣對其進行設置。這包括使用ARGB顏色並應用更多高級CSS效果，如評論中指出的那樣。

關於文件大小，請記住，瀏覽器幾乎不會下載所有4種字體格式。正確完成，通常只有一個會被下載。

另一種方法是對圖標使用SVG（不是SVG字體）。瀏覽器對SVG的支持小於@font-face，因此您需要柵格後備。

來源

2012-09-20 14:26:13

謝謝你的回答，所以我應該使用它，它不會有任何問題？ –

如果你能忍受我列出的警告，這似乎是一個好方法。我目前正在使用字體圖標的第一個項目，到目前爲止它進展順利。最重要的決定因素是你是否關心高密度顯示器。如果你不在乎，只需使用PNG精靈。如果你照顧，字體圖標看起來很棒。 –

爲了保證這一點，您實際上可以在圖標字體上使用CSS漸變以及轉換來緩解顏色變化。另外，它們可以通過使用css動畫/轉換進行動畫處理，這對於光柵圖像是不可能的，除非您選擇效率低下的gif。 – harryg

這個方便的網站向您展示了哪些瀏覽器支持CSS功能。在這種情況下，< IE9可以給你帶來問題。

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

就個人而言，我更喜歡使用CSS精靈爲我的UI元素，以確保acroass瀏覽器的一致性。

來源

2012-09-20 14:20:39

我也認爲CSS精靈是更好的選擇。如果自定義字體不起作用，他們有後備。如果使用@ font-face加載的圖標失敗，它們只是空白。 – gavsiu

快速免責聲明：我一直在研究一個名爲pictonic的圖標字體庫。

當我創建一個圖標，字體，它比我的所有圖標更大，因爲SVG，TTF，WOFF和EOT，所有4種字體更大所有PNG圖標。

在文件大小方面，你可能會VS圖標字體有趣的發現png格式的以下比較：

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

您應該驗證圖標，使用跟蹤被轉換成矢量格式。因爲許多像svg這樣的矢量格式也支持位圖，如果你的圖標被導入爲位圖，你將不會體驗到任何將它們轉換爲矢量化字體的相關文件大小的好處。

根據我的經驗，即使在16x16px，ttf字體應該比20個左右圖標的組合文件大小要小得多。隨着圖像尺寸的增加，這種差距隨着矢量在每個尺度上具有相同的文件大小而變寬。

這是否適用於所有瀏覽器？

取決於您使用的是什麼方法。 pictonic在所有瀏覽器上測試回ie5，但需要一些js用於舊的ie版本（5-7）。所以理論上它可以讓圖標字體在所有瀏覽器中運行。

那麼，爲什麼我應該使用這種字體方法呢？

圖標字體真的很靈活，你可以用css來操縱它們，使圖像圖標顯得非常不靈活。這裏是一個演示：https://pictonic.co/#main-demo

例如，你可以試驗你的佈局，只需幾行css就可以改變所有圖標的顏色，大小和陰影。這非常方便。因爲它們是基於矢量的，所以它們是視網膜準備好的，所以它們在視網膜屏幕上看起來非常棒，就像蘋果視網膜顯示器（視網膜macbook，iphone 4+，ipad3 +），而圖像需要媒體查詢交換雙分辨率版本，佔用更多空間。

我相信如果您使用正確的格式，它們非常高效。

和fontello.com的任何替代？

pictonic沒有導入用戶生成的圖標還的能力，但它允許您從超過2000驚人的圖標，包括一個相當大的免費圖標集生成自定義圖標字體。我們一直在不斷增加更多，所以做have a look

來源

2012-09-26 13:46:57 alzclarke

爲你另一種選擇是： http://fontastic.me/

;）

來源

2013-07-09 20:28:13

隨着字體圖標，您包括字體文件是擴展的.woff ，.ttf，.eot，.svg和該字體的css文件。它們的尺寸較小，並且在需要時可以更改圖標的大小，圖像文件png/jpeg會扭曲圖像文件，其中字體圖標可以正確縮放。
對於多個圖像，您必須向服務器發出多個http請求，這可以在這裏避免。
字體圖標文件也可在cdn上使用，因此如果某些早期的網站已將它緩存到瀏覽器中，則無需從服務器請求它。
使用fontello，您可以自定義並只使用所需的圖標。
還有fontawesome當前版本4.2，你可以得到的字體圖標，如果你需要對舊的版本，你可以選擇老版本沒有3
您也可以使用更少/上海社會科學院自定義瀏覽器的支持。
另一種選擇是使用css精靈，您可以使用傳統方法或使用在線服務對其進行優化。
在html中使用它非常簡單，一旦您確定在瀏覽器中加載了css文件和字體文件，您只需將類名稱添加到html元素中，然後您就可以自定義字體大小，顏色，背景顏色根據您的願望。

Font awesome

Fontello

您可以找到CDN here

來源

2015-01-15 14:30:00 Nitesh

字體圖標和PNG圖標

回答

相關問題