google fonts

2017年1月5日 星期四

純色小圖示的解決方案

如果有從設計手上拿過各種網頁小icon的話,應該都蠻困擾要怎麼處理這些小東西的吧?

雖然有用gulp或compass的人可能會選擇用sprite來把多個小icon組成一個images map,但還是有一些缺點的。像是如果icon要放大,可能就要存多個icon,畢竟不論放大縮小,png的邊緣都有可能模糊。

有玩過fontawesome的應該都知道純色圖片可以做成字型檔,由於字型檔本身是向量的結構,因此純色圖片可以壓成一張大的字型檔。

優點有這些:

  1. 縮放無鋸齒、模糊
  2. 改變顏色可以直接下color的CSS,不用做成另一張圖
  3. 改變大小用font-size做變化就好
  4. 基本上可以相容到ie8
  5. 文字可以用text-shadow這個CSS功能產生陰影

但也是有缺點的,就是只能做純色圖。因此icon有兩種以上的顏色可能要繼續沿用sprite了。

之前同事有跟我提這件事,她本來想有時間自己嘗試壓文字,但她離職就不了了之QQ

後來筆者找個時間研究,發現根本有線上支援的網站,不用花時間自己壓成多種格式(真要自己壓可以參考下面那篇網頁使用微軟正黑體的修復方案最後提到的製作補丁)。

目前我在使用的是fontastic,這套原本就包含好幾個免費icons,因此除非沒有適合的,不然也沒必要特別製作啦……

選用icons這邊就不示範,這裡提供上傳的方法。

  1. 註冊登入

    註冊登入

  2. 新增icon

    新增icon

  3. 匯入icon

    匯入icon

  4. 將設計給的SVG整理乾淨後把檔案匯入

    SVG整理乾淨

  5. 就可以在首頁看到客製的icon了!

    首頁步驟示意

    1. 會先看到匯入的為一個New Set
    2. 如果未來想要繼續在這個Set增加請使用Add icons to this set.
    3. 點選要publish的icon後(該icon會被黃框圈起)後到publish下載icons集
  6. 下載

    下載