分類彙整: 免費資源

Google Fonts 推出「思源黑體」中文網頁字型,改善網頁文字顯示效果

Google Fonts 推出「思源黑體」中文網頁字型,改善網頁文字顯示效果

思源黑體是 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 程式碼放入網站的,修改 CSS 來加入「Noto Sans TC」就能載入網頁字型。

Google Fonts 推出「思源黑體」中文網頁字型,改善網頁文字顯示效果

從網站介紹可以得知,Noto Sans TC 涵蓋常用的 7,800 個繁體中文字元,以及 223 個額外字元來符合台灣的 CNS 11643 P1 和常用國字標準字體表。
STEP 2
若你擅於 CSS 的話,也可以把 Noto Sans TC 的 CSS 部分直接取出,置入自己網站或部落格原有的 CSS 檔,也有一樣的效果(同時減少檔案 request)。
Google Fonts 推出「思源黑體」中文網頁字型,改善網頁文字顯示效果
STEP 3
順帶一提,Google Fonts: Early Access 還有提供其他的中文網頁字型免費使用,不過比思源黑體還要早出現,包括 cwTeXFangSong(仿宋體)、cwTeXHei(黑體)、cwTeXMing(明體)、cwTeXYen(圓體)和cwTeXKai(楷體)五種,有興趣的朋友可以研究一下。
這五套字型是由 cwTex 排版系統而來,開發者為吳聰敏、吳聰慧、翁鴻翎。
Google Fonts 推出「思源黑體」中文網頁字型,改善網頁文字顯示效果