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

Google Fonts 推出「思源黑體」中文網頁字型,改善網頁文字顯示效果
(Copyright: horsager / 123RF Stock Photo

思源黑體是 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」就能載入網頁字型。

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 推出「思源黑體」中文網頁字型,改善網頁文字顯示效果

延伸閱讀:

分享本文
Pseric
Pseric

學生時代成立網站以來堅持每日更新,在挖掘資料的過程中慢慢找出自己經營網站的方法,最開心的是有一群一起長大的讀者。

文章: 6250