免費資源網路社群

免費資源網路社群：Google Fonts 推出「思源黑體」中文網頁字型，改善網頁文字顯示效果

Posted: 07 Mar 2016 11:30 PM PST

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

就搞怪

靈異新奇好笑

公告版位