對中文網頁來說,CSS 字型設定一直是個麻煩的問題,想直接載入字型檔案容量太大,拖慢網頁速度、耗費過多流量,通常會使用網頁字型解決,像是 Google Fonts 和 Adobe Fonts(以前叫作 Typekit)就有提供思源黑體和思源宋體等中文網頁字型,只要加入一段 JavaScript 程式碼並調整一下 CSS 樣式表就能使用,讓網頁的中文部分更易於閱讀,設計看起來也更有質感。
WebFont
思源黑體 Noto Sans TC 繁體中文網頁字型正式上架 Google Fonts
PaymentFont 免費支付圖示集,收錄 116 個常用付款方式向量圖檔(信用卡、PayPal)

在需要付費的網站中,通常會在購物車或網頁底部放上付款圖示,代表這裡支援信用卡或其他線上支付管道,例如 PayPal 或 Stripe 等等,當然這些圖案都能在網路找到,而且有著各式各樣的設計風格,透過圖片編輯軟體自行調整一下馬上符合你的網站,但如果你不想東湊西湊又要花時間修改,直接選用已經準備好的向量圖示集就更簡單了!若你有需要這些支付相關圖示請繼續閱讀下去。
Iconfont.cn 阿里巴巴免費向量圖示庫,可產生中文網頁字型嵌入網站
Google Fonts 免費字型網站提供相當大量的中英文字型下載,如果要運用於網站,也能立即產生內嵌程式碼,以 Webfont 形式在瀏覽器開啟網頁時快速載入字型檔。一般來說,英文字型運用在網頁中幾乎沒什麼太大問題,但中文因為字型檔案太大、授權等問題,就必須借助一些技術來加快載入速度,避免影響使用者讀取網站,例如使用 Typekit、Google Fonts 載入思源黑體提升文字顯示質感(不過後者仍在測試階段)。
Inter UI 側重於螢幕易讀性的免費英文字型,文字偏小依舊可正常閱讀
免費資源網路社群分享過不少免費字型,絕大部分都是以英文字型為主,畢竟英文字型在製作難度上相對於中文少很多很多,不過中文還是有 Google 和 Adobe 共同開發的思源黑體、思源宋體可免費下載,算得上是近幾年免費中文字型最令人期待的開源計畫。英文字型就更不用說了,Google Fonts 一站滿足,如果你想將中文字型運用到網頁裡,可參考「Google Fonts 推出思源黑體中文網頁字型,改善網頁文字顯示效果」教學說明。
Standart.io 簡單設計線條俐落圖示集,Sketch、SVG 格式免費下載
上週介紹過一套簡潔設計的免費圖示集「IconBros 持續更新高品質免費圖示集,SVG 和 PNG 格式下載」,相信有興趣的讀者朋友應該已經前往下載,類似簡單風格的圖示很多,也容易被應用到各種情境中使用。如果你偏愛這類設計專案,我將在免費資源網路社群網站裡陸續介紹、推薦給大家,而你可以先從「免費圖示」分類找到我之前推薦過的項目,簡單來說,網路上有非常多的資源,只要善加利用絕對可以幫助你省下許多重新開發造輪的時間。
IconBros 持續更新高品質免費圖示集,SVG 和 PNG 格式下載
Devicon 免費程式語言、設計、開發工具圖示集 Icon Font、SVG 兩大格式
Ionicons:700 個開放原始碼高品質圖示字型免費下載
WordPress 從 3.8 開始加入官方圖示集「Dashicons」,將前台及控制台可能會用到的圖案一致化,當然也能透過 WordPress 本身的 CDN 讓圖示載入速度更快,本來打算將原有網站佈景主題需要用到的圖案也替換成 Dashicons,無奈缺少一些圖示(Dashicons 不打算加入更多社交網路按鈕),Google 的 Material design icons 也是礙於商標使用問題而無法放入其他社群圖示,幾經考慮後只好轉向尋找其他更合適選項,於是促成這篇文章的出現。
Type Hero 在瀏覽器即時測試 Google Fonts 效果,可切換字型和背景顏色
Google Fonts 可能是目前收錄最多免費英文字型的網站,去年大改版後,原本動線不佳和瀏覽不便等情形已經獲得改善,走向更簡約的設計風格,整體瀏覽感覺是很棒的!假如你不喜歡它的字型搜尋或測試功能,也有開發者自行開發第三方應用,例如 FontCDN 更好用的網頁字型搜尋工具,能直接在網頁快速套用 Google 字型的 Font Swap 外掛程式或是 Better Font Finder 更直覺的字型檢視器,都是這網站之外值得一試的免費服務。