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

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

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

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

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

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

使用教學

STEP 1

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

STEP 2

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

STEP 3

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

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

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