在網站設計中,為了點綴外觀,通常會用上許多icon(圖示,如Google的搜尋按鈕是個放大鏡)
早期的作法會將icon以img方式載入,直覺又簡單
但因為每一個img都會對server發送一個request,會造成server的負擔(註1)
而後開始流行將圖片全部打包成一張圖
然後以css指定背景位置的方式做出類似img的效果(css sprite
這作法可以只發一個request就取回所有圖片,減少封包傳遞
但仍有一些缺點,例如製作不易,圖片調整大小很麻煩(座標起點之類的都得換)
不能換顏色且放大有鋸齒...等

font_0
▲Google目前也是將所有圖片合成一張圖的作法

在IE 8以下的瀏覽器基本上被淘汰後,多數網站開始能使用CSS3的一些技術(註2)
@font-face這個方法,可以讓Client端的電腦使用Server端的字型檔
所以過去因為客戶端沒裝相同字型所以無法顯示的情形已有解了
因此,現在有部分網站開始使用將圖示轉成向量圖後包成字型檔的作法
bootstrapFont Awesome等都有提供圖形的字型檔
由於等同於字型,所以可以靠CSS直接修改大小、顏色且不會失真
可惜只能使用單色,無法像一般圖片顯示五顏六色

現在網路上已經有相關服務,可以把現有的圖片變成字型檔
甚至還提供許多免費圖形可用,相當親民
本篇就來介紹這兩個網站的操作方法吧

註1:
雖說現在瀏覽器都有cache
不過Chrome還是會先發request詢問是否有更新,Firefox就不會
這會造成假設某網站的圖片有換,Chrome會切換成新圖片
Firefox則否,除非使用Ctrl+F5的方式重新刷新
Chrome作法的優點是可以保證不會顯示舊圖片,但就對網路有些負擔

註2:
IE 8幾乎不支援CSS3的所有特性,直到IE 9開始才支援一半
許多網站為了配合使用IE 8以下的使用者,不得已捨棄掉許多CSS3的特性不用
好在由於Windows XP的退場,很少有電腦只能裝到IE 8的限制了
現在桌機最大宗的Win 7可以裝到IE 11都沒問題

 

Fontastic

這是個線上產生圖示字型的服務,而且基本上免費!
網站還提供了許多免費圖示,相當佛心

font_1

首先我們必須註冊一個帳號
註冊方式超簡單,只要輸入信箱跟自訂密碼(紅圈處)即完成註冊

font_2 

首先會進入[SELECT]頁面,下方會提供一些圖示,只要點選就可以加進去了

如果覺得這些圖示不夠好看,點選最下方的Add more icons
進去後在圖示集點選ACTIVATE,就可以把其他圖示集加進選擇了
最上方有一些需要付費的Premium圖示集,不算便宜但數量蠻多的

font_5

這些都不喜歡? 沒關係,可以選擇右上角的IMPORT ICONS
就可以把自己的圖示加進去了
不過要注意,只支援SVG格式!只支援SVG格式!只支援SVG格式!(很重要所以要說三次)

選右上角的Modify Font,可以修改字型名稱跟CSS的前綴
避免CSS名稱跟其他圖示集重複

font_3

[CUSTOMIZE]可以調整圖示取代的字元等詳細設定
如果今天你要產生在Windows使用的字型可能需要調整一下
反之若是網頁用的圖示字型可以不用修改

font_4

選好圖示後,進入[PUBLISH],選擇發布方式
Icon Font Cloud是該網站提供的服務,可以把產生的字型檔存在雲端
你只需要把連結連過去即可
但是請注意每個月最多只能連5000次,超過就要付費了

install manually是直接下載打包好的字型檔
包括網頁需要用到的css/eot/svg/ttf/woff等一應俱全
下載回來的ttf也可以直接安裝到電腦上喔
在此當然是建議使用後者,不但免費而且免擔心對方服務中斷的風險

在網頁上要如何使用呢? 請直接參考範例網頁
首先要把css引用,然後直接使用class名稱即可
例如我想用打勾符號,就這樣寫
<div class="icon icon-check-circled"></div>
div也可以換成span或其他html元素
想把icon這個前綴改成別的,就去前面介紹的Modify Font修改吧

 

Fontello

如果覺得上面的操作還是太麻煩的話
再介紹Fontello這個更簡單的產生圖示字型的服務
基本上所有Fontastic有的功能他都有
像上傳自己的svg圖形,自訂CSS前綴等
也有提供一些基本的圖示供選擇,沒有任何需要付費的功能
選擇頁面還可以調整圖示大小預覽結果,很貼心
下載的字型檔除了標準的css,甚至還提供了IE 7版本的css跟直接把svg內嵌的css
可說是非常全面

font_7

 

IcoMoon

這個網站也是產生圖示字型的網站,前兩個有的功能他也都有

icomoon  

 

Free Online Converter

雖然前面說可以上傳自己的圖示,但是限定svg格式
一般圖片要怎麼轉換成svg格式呢?
免煩惱,網路上也有轉換svg的服務囉

font_6

使用方式很簡單,首先選擇要從本機上傳或直接給圖片連結
Resize可以選填要不要改變圖示的大小跟DPI
最後選下方的Convert file,就可以下載檔案了

幾乎所有格式的圖片都可以轉成svg格式
他會將深色部分變成實心,淺色部分變成空心
(所以圖片如果很淡的話,有可能轉換成空白)
原始圖片如果有去鋸齒的半透明的話,轉出來的圖示可能會有點變形
不過可以靠修改原始圖片來解決
可惜的是沒有批次轉換,不然就完美了

蕭雲 發表在 痞客邦 PIXNET 留言(0) 人氣()