自訂中文字型

中文字型資源

網路上可以找到的中文字型網站還有很多，分享目前依然提供下載服務的網站給大家參考。

• 全字庫（CNS11643中文標準交換碼全字庫），這個在政府開放資料平台上可以找到，目前提供了兩款字型開放下載，全字庫宋體字型檔與全字庫楷體字型檔。
• 字型檔案下載網址：https://data.gov.tw/dataset/5961

• 教育部語文成果網，目前提供三款中文字型下載，分別是楷書、宋體、隸書。
• 字型檔案下載網址：https://language.moe.gov.tw/result.aspx?classify_sn=23

• 說文解字 True Type 字型，目前收錄於本字型檔內的字數共計有6721個字。
• 字型檔案下載網址：https://www.cns11643.gov.tw/downloadList.jsp?ID=2&ID2=20

• 翰字鑄造 JT Foundry 的台北黑體 Taipei Sans TC。
• 字型檔案下載網址：https://sites.google.com/view/jtfoundry/zh-tw/downloads

• 嘉市體，這是嘉義市政府請 justfont 團隊與字型設計師曾國榕，為嘉義市所開發的第一套城市標準字型。
• 字型檔案下載網址：https://www.chiayi.gov.tw/News_Content.aspx?n=8407&s=641274

• jf open 粉圓字型，這是是基於 Kosugi Maru 由 justfont 設計師針對台灣日常應用所開發的開源字型。
• 字型檔案下載網址：https://justfont.com/huninn/

• 假粉圓體簡單來說就是，基於 jf open 粉圓字型的開放原始碼中文字型，新增有字重的粉圓字體，5 種字重 (Style)：Extralight, Light, Regular, Medium, SemiBold。
• 字型檔案下載網址：https://github.com/max32002/FakePearl

• 思源宋體是 Adobe Type 推出的最新泛 CJK 字體，有 65,535 字 7 種字重。
• 字型檔案下載網址：https://source.typekit.com/source-han-serif/tw/

• 順其字然的清松手寫體，目前已經完成的有 8 套手寫字體。
• 字型檔案下載網址：https://github.com/jasonhandwriting/JasonHandwriting

• 芫荽（iansui）基於 Fontworks 的 Klee One 衍生的開源繁體中文字型，Big5 範圍內約 8,170字。
• 字型檔案下載網址：https://github.com/ButTaiwan/iansui

Webfont 網頁字型

想要在網頁套用中文字型，如果訪客的電腦上沒有安裝相同對應的中文字型，那麼字型效果是無法實現的。這就是網頁設計需要使用的字型必須是 Webfont 網頁字型。最有名的 Webfont 網頁字型當然就是大家常用的 Google Fonts。

在網站上想要建立中文字型效果，讓訪客可以直接透過瀏覽器瀏覽就可以看到中文字型，網站需要使用 Web 開放字型格式（Web Open Font Format，簡稱WOFF），這是一種網頁所採用的字體格式標準。

在前面的中文字型資源，跟大家分享了很多中文字型下載的檔案，如果有注意到，多數都是 TTF 格式的字型檔案，不過還是有字型開發者提供了 Webfont 檔案格式的字型檔可以下載，例如：順其字然的清松手寫體，就提供了 1-5 款手寫字體的 woff 與 woff2 檔案格式的字體，方便大家在網站上使用。

自訂中文字型

接下來要跟大家示範，如何在 WordPress 網站套用自己喜歡的中文字型，這裡我們會以芫荽（iansui）為範例，所以先到前面的中文字型資源，先將 芫荽（iansui）中文字型下載到自己的電腦上。

• 首先登入 WordPress 網站控制台，接著到外掛/安裝外掛，關鍵字請輸入：Yabe Webfont，找到以後請點擊立即安裝，安裝完成以後請點擊啟用。

• 如果還沒有下載芫荽（iansui）中文字型的朋友，請先到芫荽（iansui）下載頁面：https://github.com/ButTaiwan/iansui/releases，下載最新版本的字型到本機。

• 芫荽（iansui）中文字型下載完成後解壓縮，裡面有一個 Iansui-Regular.ttf 檔案，我們需要將它專換成網頁專用的字型檔案。今天介紹的 Yabe Webfont 外掛程式開發者，就提供了這個方便的轉換工具，大家可以到 https://webfont.yabe.land/en/misc/convert-ttf-woff2/，將 Iansui-Regular.ttf 檔案拖拉到網頁的轉換區塊就可以開始轉換了。

• 轉換的效率還算不錯，可以在網頁的右下角看到檔案轉換中的提示區塊，轉換完成以後將轉換後的字型檔案 WOFF2 儲存到本機上。

• 接著回到網站的控制台，找到外觀，可以看到 Yabe Webfont 選單，點擊後來到字型設定畫面，接著請點擊 Add New 新增自訂字型。

• 新增自訂字型畫面，有幾個需要注意的地方，首先就是設定自訂字型的名稱，接著在 Font Family 這個欄位建議輸入英文，以芫荽字型來說，我們輸入 iansui，CSS Selector | Fallback Font 這個欄位，可以設定自定義的選擇器，這樣只要是符合這個選擇氣得才會套用自訂的中文字型，非常好用。接著記得上傳轉換後的 WOFF2 字型檔，完成後請點擊儲存就可以了。

• 上傳 TTF 轉換後的 WOFF2 檔案。

• 一切設定正確同時也上傳字型檔案完成後，可以在自訂的中文字型設定畫面看到即時的字型展示效果。同時將下方的 CSS 語法複製起來，等等在自訂 CSS 設計時會需要。

• 接下來到控制台的外觀/自訂，找到附加的 CSS，將前面複製的 CSS 語法貼上，然後點擊發佈。

• 還記得在前面的新增自訂中文字型的步驟中，我們建立的自定義的 CSS 選擇器，回到文章或是頁面編輯畫面，在想要套用自定義的中文字檔案區塊，點擊右側選單的最下方進階設定，找到”附加的 CSS 類別”，填入我們自己設計的 CSS 選擇器，就可以套用效果了。

• 完成以後回到前台就可以看到 芫荽（iansui）中文字型展示效果。

Blocksy Pro 付費佈景主題

• Blocksy 佈景主題是我個人非常推薦的佈景主題之一，免費版本就提供非常多實用的設計功能，幾乎可以滿足多數網站的需求，眼尖的朋友應該也會發現，在眾多的教學內容中，都是採用 Blocksy 佈景主題來做範例，如果對於這個佈景主題功能滿意的愛用者，個人推薦可以購買 Blocksy Proi 付費版本。
• 接下來的內容，如果是使用 Blocksy Pro 付費版佈景主題的朋友，一定很喜歡的這個功能就是 Custom Fonts 自訂字型，在佈景主題的 Dashboard/擴充功能/Custom Fonts。

• 啟用這個擴充功能後，就可以自訂自己喜歡的字型，點擊 Add Fonts 就可以開始新增字型了。

• 新增字型時需要填寫字型名稱（註），並上傳字型的網頁字型檔案，這裡我們上傳輕鬆手寫體做範例。

• 上傳完成儲存以後，就可以看到新增的自訂中文字型了。

• 接著回到佈景主題的字型設定選單，往下捲動到最下方就可以看到這個新增的中文字型可以選用。

• 設定完成以後，就可以看到網站前台的內容展示了我們自訂的中文字型了，非常方便。

• 註：實測以後如果想要在區塊佈景主題也可以套用自訂的中文字型，那麼在新增自訂字型的時候，需要將字型取名的方式改為英文，這樣在區塊編輯時才可以套用效果。

• 在區塊編輯器的右側功能選單，字型就可以挑選我們新增的自訂中文字型了（輕鬆手寫體）。

• 可以在區塊編輯器中個別設計，這樣可以讓網站的內容字型更活潑，設計上也更能彈性使用，非常方便有趣。這樣就可以在同一篇文章內容，看到套用不同字型的展示效果。

最後，網路上關於中文字型的資訊量非常大，每款字型開發都會有所謂的”缺字”問題，使用前還是需要詳細閱讀開發者的說明文件，同時網頁使用前也請詳細閱讀每款字型開發者的授權使用說明。