Iconfont.cn 阿里巴巴免費向量圖示庫,可產生中文網頁字型嵌入網站

Iconfont.cn 阿里巴巴免費向量圖示庫,可產生中文網頁字型嵌入網站

Google Fonts 免費字型網站提供相當大量的中英文字型下載,如果要運用於網站,也能立即產生內嵌程式碼,以 Webfont 形式在瀏覽器開啟網頁時快速載入字型檔。一般來說,英文字型運用在網頁中幾乎沒什麼太大問題,但中文因為字型檔案太大、授權等問題,就必須借助一些技術來加快載入速度,避免影響使用者讀取網站,例如使用 TypekitGoogle Fonts 載入思源黑體提升文字顯示質感(不過後者仍在測試階段)。

不過如果你的訪客多半來自中國,礙於中國的網路環境情況較為特殊,使用 Google Fonts 可能因為無法正常載入字型而拖慢整體速度(雖然目前好像已經解除封鎖),就只能選擇替代方案,你總不會希望因為字型無法順暢載入而損失大量訪客。

本文要介紹的「Iconfont」是一款來自中國阿里巴巴的向量圖示庫服務,可以線上儲存、格式轉換圖示,本身也有免費的中文網頁字型 Webfont 動態產生功能,在 Iconfont.cn 中文字型庫中收錄包括思源黑體、思源宋體、楊任東竹石體、站酷小薇體、阿里智能漢儀黑體、站酷高端黑體、廈門正道標題體等等。

使用 Iconfont 無須註冊或付費,直接從網頁端就能產生嵌入程式碼和鏈結,網址部分是由阿里巴巴提供的 CDN,載入速度很快,把要產生為字體的文字製作成 ttfeotwoffsvg 格式,網站也會直接給出程式碼和前端套用說明。

網站名稱:Iconfont Webfont
網站鏈結:https://www.iconfont.cn/webfont

使用教學

STEP 1

開啟 Iconfont Webfont 工具,會看到預先載入的網頁字型包括思源黑體極細、粗、超粗和一般常規的字重樣式。

Iconfont.cn

STEP 2

從左側點選新增加入更多字型,在 Iconfont.cn 提供其他中文字型,點選後會加入,即時套用你當前的字型,那麼如何以 Iconfont 產生需要的特殊字型呢?直接在上方輸入要用的文字後點選「生成字體」產生對應的嵌入程式碼和相關檔案。

Iconfont.cn

STEP 3

最後,點選「引用線上地址」產生 @font-face 和相關檔案嵌入語法,只要把程式碼加入你的樣式表就能載入該字體,如果對於套用方式不夠熟悉,點選「前端應用幫助」鏈結取得更多更深入的使用說明。

Iconfont.cn

在說明幫助裡就有使用 font-face 聲明字型、定義使用 Webfont 樣式、為文字加入對應樣式等等範例程式碼,因為是中文說明應該不會太難懂,有需要的朋友可自行研究一下。

Iconfont.cn

不過就我的實際操作試用,Iconfont 和 Google Fonts、Typekit 這類 Webfont 還是有點不太一樣的,Iconfont 只能針對你預先設定好的文字加入網頁字型效果,無法動態抓取完整內容自動載入特定字型,但類似功能依然有其可用性,如果要做網頁設計需要在一些標題或部分文字加入特殊字型,且你的訪客多半來自中國,Iconfont 或許可以一試。

值得一試的三個理由:

  1. 提供向量圖示庫、中文網頁字型動態產生功能
  2. 多種中文字型可供選擇
  3. 一鍵產生相關檔案,內嵌程式碼使用阿里雲 CDN
分享到...