中文網字計畫：把 80 套免費可商用中文字型裝進一個 CSS 連結

用 AI 摘要這篇文章：

ChatGPT Claude Perplexity Google Grok

中文字型一直是網頁設計裡最不講理的成本：英文字型幾百 KB 就能上線，一套中文字型動輒二三十 MB，放到一般網站的資源預算裡根本裝不下。中文網字計畫（Chinese Webfont Project）就是衝著這個問題來的開源專案：把免費可商用的中文字型收集起來，用切割工具拆成大量小分包放上雲端，網站只要掛一條 CSS 連結，瀏覽器就會只下載頁面真正用到的字型片段。這個 2021 年開始的 GitHub 專案目前有 1,471 顆星，收錄 80 套字型，倉庫本身採 MIT 授權，字型檔則各自保有原本的授權條款。

不過在動手之前，有個比「選哪套字型」更影響網站壽命的決策：你要用哪種方式引用它。2026 年 7 月，一批照著舊教學掛 CDN 連結的網站字型集體消失，原因不是字型下架，而是這個專案 hotlink 用的字圖 CDN 舊域名，隨著 Deno Deploy Classic 服務在 2026 年 7 月 20 日終止而整個變成 404。引用方式的壽命風險，這個專案已經示範過一次了。

文中的連結格式與檔名，都是我在 2026 年 10 月實際打開 CDN 連結與 npm 套件確認過的版本，照著做不會踩到已經失效的舊路徑。

一套中文字型先切再上線：507 個分包背後的按需載入

專案的結構可以想成三件事的組合：一個收字型的倉庫、一套叫 cn-font-split 的切割引擎，加上字型切好之後的發布管道（自家的字圖 CDN 與 npm 套件）。切割引擎才是技術核心，它把一份字型檔依照 unicode-range 拆成大量小包，每一包對應一段字碼範圍，再產生一份 result.css 告訴瀏覽器每段字元該去哪個檔案拿字形。

實際抓一份 result.css 來數最有感。以收錄的京華老宋體 v1_007 來說，這份 CSS 有 507 個 @font-face 區塊，每個區塊各帶一段 unicode-range，對應 507 個 woff2 分包；我隨機抽一個分包下載，檔案只有 8,064 位元組，伺服器端給的媒體類型也正確是 font/woff2。對比同一套字型在 npm 上的完整套件：整包 tarball 壓縮後 52.7MB、解開共 1,091 個檔案。這就是切割的意義：完整字型幾十 MB，但一篇實際的網頁只會用到其中幾百到幾千個字，瀏覽器照 unicode-range 只抓用得到的三五個分包，起步成本從幾十 MB 掉到幾十 KB 的量級。

引擎本身的維護狀態也值得單獨看：cn-font-split 在 2026 年 6 月 12 日還發布了 7.4.3 版，npm 上近一個月有 19,402 次下載，是活的工具。官網首頁展示的數字是整包構建時間 820 毫秒、OpenType 特性支援 95 項（共 124 項），這兩個是站方自己標示的成績，當參考就好。

三種掛上網站的方式，依賴對象各不相同

要把它掛上網站，現階段有三條可用的路，差別在於你把命交給誰。

|引用方式|做法|依賴對象|壽命風險|

|—|—|—|—|

|字圖 CDN|HTML 加一條 link 標籤指向 result.css|專案自營的 cn-font.claude-code-best.win|域名已換過一次，且不保證永遠免費|

|npm 自架|npm install 之後在程式裡 import CSS|你自己的建置流程|最低，字型檔在專案裡|

|unpkg 直連|link 標籤指向 unpkg.com 上的套件檔|npm 的公開鏡像服務|低，但路徑要寫對|

字圖 CDN 最快。在頁面 head 裡加：

<link rel="stylesheet" href="https://cn-font.claude-code-best.win/packages/jhlst/dist/%E4%BA%AC%E8%8F%AF%E8%80%81%E5%AE%8B%E4%BD%93v1_007/result.css">

再在自己的 CSS 裡寫 font-family 指到對應的字型家族名稱就完成了。連結裡那串百分比編碼是字型資料夾的簡體中文名，這是路徑的現實：倉庫裡多數資料夾與字型家族名都以簡體命名，複製時要原樣保留。

npm 自架最穩。以京華老宋體為例，npm install @chinese-fonts/jhlst 之後在程式碼引入 dist 目錄裡的 result.css，字型分包會跟著你的建置流程走，不依賴任何第三方的 CDN 域名。我把 3.0.0 版的套件抓下來解開數過：1,091 個檔案包含完整 result.css 與全部 woff2 分包，離線可用，自架成立。

折衷的路線是 unpkg 這類 npm 鏡像也直接提供套件檔，把上面兩種做法的 URL 換成 https://unpkg.com/@chinese-fonts/[email protected]/dist/ 開頭即可。要提醒一個文件的小坑：套件 README 的範例把檔名寫成 results.css（複數），實際檔名是 result.css，我實測照 README 抄會得到 404，改成單數才是 200。

舊域名已經斷過一次：hotlink 的壽命風險有前科

字圖 CDN 目前用的域名 cn-font.claude-code-best.win 是新家，官網每個頁面頂端都掛著遷移公告：舊域名 chinese-fonts-cdn.deno.dev 即將退役，引用地址要盡快更新。我實際打舊域名的連結，拿到的是 Deno Deploy 的制式錯誤頁，寫明 Deno Deploy Classic 已於 2026 年 7 月 20 日終止服務，部署不復存在。換句話說，照 2024 到 2025 年間教學文掛上舊域名連結的網站，字型都已經斷了，而且斷點出在免費託管平台的政策，與字型專案本身無關。

Pin

新域名倒是把服務鏈做得很清楚。直接在瀏覽器網址列打開 result.css 會被擋下來，狀態碼 403，附的站方訊息大意是：這個網址不開放直接開啟，請透過 link 標籤或 CSS 檔案載入。這是站方設的閘門，不是連結壞了；帶上頁面 Referer 再請求同一個網址，伺服器會先給一個 307 轉址，目的地是 ik.imagekit.io 下的 fonts9 空間，最終 200 拿到完整 CSS。woff2 分包也走同一條鏈。所以除錯時的判斷順序很重要：先確認你是用 link 標籤引用而不是直接打開網址，再檢查網頁的 Referer 政策，最後才考慮連結本身有沒有打錯。

至於這條 CDN 的規模，官網的字圖 CDN 頁寫著每月使用量超過 300,000 次、已連續提供一年穩定服務；首頁的服務說明卡則自述前端部署在 Netlify、後端服務由 Deno Deploy 支撐、字圖 CDN 基於 ImageKit 這家媒體 CDN 服務構建。這些都是站方自述的數字與架構說明，採用時當參考，別當保證：畢竟同一批自述裡的舊域名，壽命就停在 2026 年 7 月。

授權要剝兩層：npm 標的 MIT 不是字型的授權

這個專案最容易誤讀的地方是授權結構，它有兩層，混在一起看會出事。

第一層是倉庫與套件的授權。GitHub 倉庫掛 MIT，npm 上每個 @chinese-fonts 套件的 package.json 也都寫 license: MIT。但這個 MIT 指的是打包管線與 CSS 等程式部分的授權；套件 README 另外一行寫得很保守：字型本身的授權請見官網各字型頁面。也就是說，你的依賴掃描工具會對這些套件回報 MIT，但那不代表裡面的字型檔是 MIT。

第二層才是字型本身的授權，而且是逐款不同的。收錄的霞鶩文楷上游專案是 SIL Open Font License 1.1，這是字型界最常見的可商用條款，而且它的授權檔附加了一條明確許可：以網頁字型交付為目的的子集化與 WOFF2 轉換可以沿用霞鶩、LXGW 等保留字體名，條件是不能當成桌面安裝字型另行散布，等於為這種用法先開了門；其他 79 套各有各的出處，專案的收錄規則是只接受免費商用字型，貢獻時要在 issue 或 PR 裡附上字型連結與授權資訊。把關機制存在，但把關的是提交當下的宣告，實際商用前逐款確認授權，這個動作省不得。

還有一段更深的爭議值得知道。2023 年 7 月，有使用者在 issue 裡引用 SIL OFL 的常見問題集，主張字型做子集化（切割）時若要保留原始字體名，授權上站不住腳，建議切割後混淆字體名稱。作者的立場是：這個專案做的是全量切割，所有字元都保留、字形未修改、原始中繼資料都在，屬於功能等效的處理，可以沿用原名；他也坦承名稱混淆的功能在切割引擎裡早就有了，只是便於管理而預設使用原名。這場討論始終沒有等到第三方裁決，今天的 result.css 裡字型家族也仍然是原始名稱。同年那串討論裡還帶出兩件事：有使用者點出特定字型的連字在分包後丟失（作者後續重新打包處理了複雜字形），以及作者提到當時網站遭攻擊、CDN 被盜用，功能修復的優先順序排在授權議題之前。對一般網站來說這段歷史不影響使用，但對授權把關嚴格的公司，OFL 字型的切割與再散布該不該先給法務看一眼，這個案例值得當背景資料。

打開清單會看到什麼：注音字型、繁中變體與簡中介面

官網的字型清單對台灣使用者其實比想像中友善。清單裡找得到注音多音字型庫楷（ToneOZ-RadicalZ-Kai），這是 ToneOZ 系列裡專為注音與多音字設計的楷體；同一系列的曉聲通秋茄還有繁中注音變體（ToneOZ-Zhuyin-Tsuipita-TC），做教材、兒童讀物或需要標注讀音的頁面很實用。原俠正楷（GuanKiapTsingKhai）是充滿手寫感的楷體，還提供 TW 等多種地區變體；另外像就是不錯字、Cubic 11 點陣明體、京華老宋體、霞鶩文楷全家族（含螢幕閱讀版與漫黑）都在收錄裡。清單頁的卡片直接用字型渲染預覽文字，滑鼠移到卡片上就能即時預覽字型樣子，挑選的體驗做得不錯。

Pin

介面語言是另一回事。官網只有簡體中文與英文兩種，繁體介面頁（zh-tw）直接是 404。字型資料夾名稱與 CSS 家族名也多為簡體中文，這對繁體網站的影響主要在工程細節：引用連結裡的中文路徑要經過百分號編碼，而且不能自己把簡體字換成繁體，路徑對不上就是 404。

專案另外內建了一個 Google Fonts 查詢頁。站方在文件裡說明，這是給無法順利連上 Google Fonts 的使用者查 CSS 連結用的，資料取自 Fontsource 的靜態倉庫。對網站基礎設施需要繞路的環境來說，算得上順手的小工具。

放緩的不只是字庫：文件漂移與自述數字

把限制集中攤開來看，這個專案目前的節奏是「引擎活著、字庫放緩」。字型倉庫的主要分支最後一次提交停在 2025 年 10 月 21 日（那次是把 Maple Mono CN 升到 7.8 的合併），其後近一年沒有新字型進庫；issue 板上 2026 年 10 月初還有人提交添加字型的申請，但尚待處理。對照引擎 cn-font-split 到 2026 年 6 月仍在發版，維護重心明顯在工具鏈這側。收錄停留在 80 套對使用倒不是壞事，字型這種資產本來就重質不重量，但期待它每個月長新字型的話會失望。

文件與現況的漂移則散落幾處，整理給打算照文件操作的人：README 推薦的衛星服務 font-now（上傳自訂字型取得 CDN 連結）連結已經 404；套件 README 的 results.css 檔名是筆誤；package.json 的 main 欄位指向 index.css，但套件裡實際不存在這個檔案；至於官網的字型詳情，沒有穩定的直達網址：實測部分路徑直接開是 404、部分被轉回首頁，實際內容要從字型清單的互動進去才看得到，站方在 2024 年重構網站時自己記錄過畫面渲染的錯誤，今天的行為多少延續著那批問題。

最後把自述與實測分清楚：80 套字型、507 個分包、8KB 單包、1,091 個套件檔案，這些是我逐一清點出來的數字；每月 30 萬次使用量與穩定服務一年，是站方頁面上的宣稱，兩者請分開對待。

判斷：什麼情況用它，什麼情況繞過它

它適合的人：想在網站上用好看的中文字型、又不想自己處理子集化的開發者。做活動頁或原型，字圖 CDN 一條連結五分鐘見效，承擔的風險是域名壽命，這個風險它已經兌現過一次，用在活得久的正式網站上就要想清楚；要上線的專案，npm 自架是正解，版本鎖死在 package.json 裡，誰也拿不走；設計師要原始字型檔，官網與 GitHub 都能下載，授權逐款確認後就能進設計流程。

它不適合的場景也明確：需要大量字型家族與及時更新的商業設計環境（這裡永遠只有 80 套且更新已放緩）、無法接受簡體命名路徑與簡中介面的協作規範、以及法務對 OFL 字型切割再散布有疑慮的組織。這些情況下，把切割引擎 cn-font-split 拿來處理自己選定授權的字型，會是更乾淨的路。

### 商用需要付費或標示嗎？

專案本身不收費。字型授權逐款不同：霞鶩文楷這類 OFL 字型允許商用與再散布（OFL 要求散布時保留授權條款，也不能用原始字體名單獨販賣衍生字型）；其他字型以各家的免費商用條款為準，商用前請到字型出處確認條款細節。標示方面，站方禮貌性建議標注使用的字型並附上專案連結，屬於感謝性質，授權條款本身沒有這項要求。

### 繁體中文網站直接用會有問題嗎？

字型本身沒問題，注音與繁中變體字型甚至特別豐富。要適應的是介面與路徑：官網只有簡中與英文，字型資料夾名是簡體中文，連結要原樣複製不能自行轉成繁體。字型渲染出來的字形以該字型收錄的字集為準，繁體缺字的情況依字型而異，導入前先在預覽頁打幾段自己的文字測試最保險。

### 連結掛了字型沒生效，先查什麼？

依序檢查三件事：先確認連結是用 link 標籤引用的（在網址列直接開啟會被 403 閘門擋下，那屬正常行為）；再確認 font-family 名稱與 result.css 裡宣告的家族名完全一致（多數是簡體或英文原名）；最後確認檔名是 result.css，有個 s 的 results.css 是 README 範例裡的筆誤。三關都過了，再考慮字型本身是否收錄你要的字元。

字型之外：排版、列印與文字工具

• 免費中文字型還有官方體系的路線，先前介紹過的 思源黑體 Noto Sans TC 走 Google Fonts 的雲端字型，與這裡的自架分包是兩種不同的取用哲學。
• 排版面如果要的是文字編輯與版面設計，先前寫過的 Slogan Word 開源文字排版工具 走的是所見即所得的路線。
• 要把 Markdown 文件排成適合列印的版面，可以看 wenyan 溫言 Markdown 排版工具，與網頁字型是互補的需求。
• 網頁字型之外，圖片裡的文字排版是另一條路，文字背景圖產生器 把文字與照片合成的流程做成了線上工具。