思源黑體是 Adobe 和 Google 共同開發的開放原始碼字型,發佈時就已支援繁體中文、簡體中文、日文及韓文,因此深受許多使用者喜愛(尤其中文字型在製作難度上很高,除了付費項目外幾乎沒有更多選擇),其開源特性使更多字型同好得以就細部進行調整,重新設計出更不一樣的字型,例如:思源真黑體、思源柔黑體等等。
一直以來,我都很期待 Google Fonts 將思源黑體的中文字型部分加入,讓網頁開發者可以直接於網頁上套用中文字型,而這項計劃近期也已經上線!如果你覺得網站中文字型太過單調,可考慮使用「思源黑體」取代預設字型。
若你還有印象,先前我曾經介紹過「為網站載入 Typekit 思源黑體中文網頁字型,提升文字顯示質感」,不過礙於 Typekit 定價策略,每月僅有 25,000 次的瀏覽次數額度,雖然對於一般的個人網誌或小型網站來說相當充裕,但如果需要更多配額就必須付費使用。
Google Fonts 本身不會對流量或次數額度有所限制,且無須註冊或下載檔案,只要依照服務提供的字型 CSS 程式碼,套入自己的網站後稍作調整即可使用,非常簡單!以下我會教你如何找到 Google Fonts 提供的思源黑體(除了繁體中文外,亦有簡體中文、日文和韓文等各種版本),當然你也需要有一個可以更新 CSS 或程式碼的網站、部落格才能使用。
網站名稱:Google Fonts: Early Access
網站鏈結:https://www.google.com/fonts/earlyaccess
使用教學
STEP 1
目前「思源黑體」中文網頁字型部分僅開放於 Google Fonts: Early Access 頁面,什麼是 Early Access 呢?簡單來說,你可以把它想像成是測試版,在 Early Access 的字型還沒有被正式加入到 Google Fonts 前,透過這項機制先收集使用者的意見回饋。
開啟 Google Fonts: Early Access 頁面,找到 Noto Sans TC(Chinese Traditional),就能看到網站提供的程式碼,使用方法很簡單,只要把 Google Fonts 提供的那段 CSS 程式碼放入網站的 <head>,修改 CSS 來加入「Noto Sans TC」就能載入網頁字型。
從網站介紹可以得知,Noto Sans TC 涵蓋常用的 7,800 個繁體中文字元,以及 223 個額外字元來符合台灣的 CNS 11643 P1 和常用國字標準字體表。
STEP 2
若你擅於 CSS 的話,也可以把 Noto Sans TC 的 CSS 部分直接取出,置入自己網站或部落格原有的 CSS 檔,也有一樣的效果(同時減少檔案 request)。
STEP 3
順帶一提,Google Fonts: Early Access 還有提供其他的中文網頁字型免費使用,不過比思源黑體還要早出現,包括 cwTeXFangSong(仿宋體)、cwTeXHei(黑體)、cwTeXMing(明體)、cwTeXYen(圓體)和cwTeXKai(楷體)五種,有興趣的朋友可以研究一下。
這五套字型是由 cwTex 排版系統而來,開發者為吳聰敏、吳聰慧、翁鴻翎。
延伸閱讀:
- FontCDN 更好用的 Google Fonts 網頁字型搜尋工具
- Fontface Ninja 一鍵查看網頁使用的字型名稱、大小和行高,快速下載字體檔案
- FontReach 收錄百萬網站網頁字型使用情形,列出最熱門字型排名