如果有從設計手上拿過各種網頁小icon的話,應該都蠻困擾要怎麼處理這些小東西的吧?
雖然有用gulp或compass的人可能會選擇用sprite來把多個小icon組成一個images map,但還是有一些缺點的。像是如果icon要放大,可能就要存多個icon,畢竟不論放大縮小,png的邊緣都有可能模糊。
有玩過fontawesome的應該都知道純色圖片可以做成字型檔,由於字型檔本身是向量的結構,因此純色圖片可以壓成一張大的字型檔。
優點有這些:
- 縮放無鋸齒、模糊
- 改變顏色可以直接下color的CSS,不用做成另一張圖
- 改變大小用font-size做變化就好
- 基本上可以相容到ie8
- 文字可以用text-shadow這個CSS功能產生陰影
但也是有缺點的,就是只能做純色圖。因此icon有兩種以上的顏色可能要繼續沿用sprite了。
之前同事有跟我提這件事,她本來想有時間自己嘗試壓文字,但她離職就不了了之QQ
後來筆者找個時間研究,發現根本有線上支援的網站,不用花時間自己壓成多種格式(真要自己壓可以參考下面那篇網頁使用微軟正黑體的修復方案最後提到的製作補丁)。
目前我在使用的是fontastic,這套原本就包含好幾個免費icons,因此除非沒有適合的,不然也沒必要特別製作啦……
選用icons這邊就不示範,這裡提供上傳的方法。