網頁設計, 網頁資源

Iconfont.cn 阿里巴巴線上字型產生器,變成Webfont使用

梅干2018/09/25
梅問題-Iconfont.cn 將阿里巴巴線上字型產生器,變成Webfont使用
  由於網路字型,就是那101種,不是新細明體就是中黑體,而這一切都只能取決於使用的電腦字型,即便在CSS設為中黑體,但使用者電腦沒有時,只會顯示新細明體,而為了解決使用者端的電腦字型問題,Webfont雲端字型就誕生了,將字型放在雲端,當開啟網頁時,就會自動的載入雲端裡的字型,但目前雲端字型,都以流量作計算,唯獨Google font相當的大方,完全無需註冊與登入,更無流量的限制,讓大家使用,而使用者過的朋友,應該有過這樣子的經驗,由於中文字型相當的龐大,每當網頁開啟時,就會開始瘋狂的載入,直到把字型全部載入完畢後,字型才會替換過去,說真的不是那麼的實用,
  因此大部分的朋友,則會考慮將文字轉成圖片,這樣在載入速度會比載入文字來的快許多,最主要的原因就在於,一來是圖檔二來是所有文字已平面化了,因此載入的速度就會快許多,而最近梅干發現一個超有趣的平台,那就是阿里巴巴有個線上向量圖示庫,除了有免費的IconFont外,甚至還能將輸入的文字,即時的轉成IconFont,如此一來就能運用在標題上,再也不用作成圖檔啦!由於是IconFont所以裡面有螱少素材就顯示多少內容,所以梅干就靈機一動,只載入常用4800中文字,如此一來這會比一次載入上萬字來的快許多,同時梅干將4800字拆成12檔,因此每個檔就小小的,載入速度也會快許多,因此想讓網頁字型不一樣,不妨也可試試這個方法囉!
Iconfont Webfont
網站名稱:Iconfont Webfont
網站連結:http://www.iconfont.cn/webfont

Step1
首先進到阿里巴巴的Iconfot平台後,先將要產生的文字,填入上方的輸入框中,再按右下的「生成字體」鈕。
梅問題-Iconfont.cn 將阿里巴巴線上字型產生器,變成Webfont使用
Step2
當產生完畢後,除了可以雲端引用外,也可將這些字型給打包下載回來。
梅問題-Iconfont.cn 將阿里巴巴線上字型產生器,變成Webfont使用
Step3
接著再把剛已產生的文字引用到網頁中。
梅問題-Iconfont.cn 將阿里巴巴線上字型產生器,變成Webfont使用
Step4
這時可看到,由於剛所引用的文字,只有輸入框中的文字,當超出時,則會顯示內建的文字樣式,而這就是Iconfont的特性,並不會即時的變換,也由於Iconfont是用多少載多少,相對上來說檔案也會小很多,不用載入一大包的字型檔。
梅問題-Iconfont.cn 將阿里巴巴線上字型產生器,變成Webfont使用
Step5
因此梅干就靈機一動,找了由教育部所提供國人常用的4800字,並將這些文字轉成Iconfont,由於只載載入4800的文字,因此檔案相當的小巧,全部加起來不到1mb。
梅問題-Iconfont.cn 將阿里巴巴線上字型產生器,變成Webfont使用
Step6
這時候就可當Webfont來使用啦!當未包含的文字,則會顯示為內建的字型,分別可看到「」字是未包含在4800字內,因此這時就可自行再手動補一下囉!而這4800字也絕對相當的夠用了。
梅問題-Iconfont.cn 將阿里巴巴線上字型產生器,變成Webfont使用
[範例預覽] [範例下載]