中文字體設計指南：17 個字款與系列候選、授權與網頁部署

面對一長串中文字型，先別急著比較哪一款最美。把實際標題、內文與價格放進版面，看看字是否清楚、語氣是否合適，再檢查授權與載入成本，會比只看字型預覽更容易做決定。

做中文網頁，可以從黑體、明體、圓體與手寫字的視覺特徵找候選，但品牌氣質不由字體類別單獨決定。下面整理 17 個字款與系列候選，區分開源與付費授權，再用閱讀情境、混排與實機測試完成挑選。

本篇精華

• 挑字體的順序錯了會累死你：先定閱讀情境，再回頭選字體，不要先愛上一款字再硬塞內容。
• 黑體常適合資訊密度高的中文網站；明體、圓體與手寫體則要依閱讀情境與字級測試。
• 完整 CJK 字體通常比拉丁字體子集大得多，直接整包上傳前要檢查傳輸量與授權。
• 標楷體是作業系統內建，不等於「網頁可以隨意用」。
• 字體選完只是開始，字距、行距、字級才是讓中文真正好看的關鍵。

中文字體為什麼比英文字體更難部署

很多人以為選中文字體跟選英文字體差不多，挑喜歡的套上去就好。這個誤解會讓你在兩個地方摔跤：檔案大小，還有螢幕渲染。

先看字數。基礎拉丁字母與常用標點的字形數量相對少；繁體中文光是教育部《常用國字標準字體表》就收錄約四千八百字，加上次常用字與標點，完整字型通常需要涵蓋更多字形。實際字形數取決於字型支援範圍，不能用固定門檻定義「完整」。

這個差距會直接變成網站負擔。拉丁字體子集可能只有數十 KB，完整 CJK 字體則可能達到數 MB；實際大小會受字重、字形數、可變字體與壓縮方式影響。部署前應直接量測檔案與實際傳輸量。

中文的複雜字、細筆畫與標點，在小字級下需要實機檢查；英文字母也會受字款、字級與螢幕影響。不要只憑高解析度設計稿判斷。若把標語排成圓弧，還要一起調整半徑與字距，可參考 Figma 環形文字的排法。

台灣網站應確認字型涵蓋實際使用的繁體字、標點、人名與產品名稱，並檢查地區字形是否合適。缺字可能觸發後備字體，造成混排不一致；若後備字體也沒有字形，才可能顯示缺字符號。不能只看檔名有 TC 就略過內容測試。

換句話說，中文字體是一個「美學、效能、技術、授權」四條線同時拉扯的問題。下面我會一條一條拆給你看。

黑體、明體、圓體與手寫體：先看特徵，再看使用情境

分類有助於比較筆畫、比例與排版密度，但不能直接推算讀者對品牌的感受。下面的用途是試排方向；同一類字體也可能有差異很大的字款。

黑體（橫豎粗細接近、筆畫方正）常用於新聞、資訊介面、後台與 App，風格偏中性。小字級是否清楚仍取決於具體字款、字重、螢幕與排版；它適合當起始候選，不代表任何情境都不會出錯。

明體通常有較明顯的橫豎粗細對比與筆端裝飾，可用於書籍、品牌標題或長文。細筆畫在小字級上的呈現值得特別檢查；是否適合內文，要看具體字款、字重與顯示環境。

圓體的筆端與轉角較圓潤，可以作為品牌想呈現柔和感時的試排候選。它也有不同粗細與密度，不能一概認定較輕、較幼稚，或不適合金融與企業網站。

手寫體涵蓋書法、楷書、行書與隨筆等不同風格。裝飾性強的字款可先用在短標題；芫荽這類以閱讀、學習用途出發的字款，也值得測試內文。選擇時要看具體字形與閱讀長度。

先挑幾個符合用途的家族，再用同一段真實內容比較字款。分類能縮小範圍，最後仍要回到版面與讀者的使用情境。

17 個中文字款與系列候選：開源與付費分開看

清單包含 17 個字款或系列候選，其中有同一設計專案的不同發行版本，不代表 17 套互不相關的設計。即使標示可商用，上線前仍要核對該版本的授權檔；付費字體則依實際用途購買桌面、網頁、App 或其他授權。字檔一多，哪套可商用、哪套只買了桌面授權，單靠記憶很快就會混在一起，不妨把字檔統一交給Eagle 的字體管理功能，用標籤記下授權版本與下載日期，要用時再取出安裝。

黑體與混合書體：6 個候選

1. 思源黑體（Source Han Sans）／Noto Sans CJK：Adobe 與 Google 合作專案的不同品牌發行，採 OFL 授權。下載時要選合適的地區與格式，不要把所有版本當成相同檔案；Google Noto Fonts 官方頁面 可作為 Noto 版本入口。
2. Noto Sans TC：Google Fonts 提供的繁體中文版本。透過網頁 CSS 服務載入時，可利用分段字型資源；下載整包字檔與使用網頁服務是不同的部署方式。
3. 台北黑體（Taipei Sans TC）：翰字鑄造以思源黑體調整的開源字型，官方採 SIL OFL 1.1。試排時仍要檢查專案所需的字與地區字形。
4. 金萱（justfont，付費）：結合明體與黑體特徵的字型，不宜直接稱為「金萱黑」。可比較不同字重的效果，並依用途取得授權。
5. 文鼎黑體系列（付費）：系列內有不同字款。先確認既有品牌指定名稱，再比較字重、字集與授權範圍，不以廠牌直接推定適用性。
6. 華康黑體系列（付費）：可從官方字型清單比較字款與地區字集。桌面、網頁與其他嵌入用途，需核對實際購買方案。

明體：4 個候選

7. 思源宋體（Source Han Serif）／Noto Serif CJK：Adobe 與 Google 合作的開源明體專案，採 OFL 授權，提供不同地區與部署版本；可由 Google Noto Fonts 官方頁面 查找 Noto 發行。
8. Noto Serif TC：Google Fonts 的繁體中文明體版本。使用網頁服務與自行下載字檔的傳輸成本不同，上線後應實際量測。
9. 蘭陽明體（付費）：justfont 的商業字型，由林霞與團隊設計。它不是可免費商用的思源宋體衍生字；應依官方條款購買，網頁嵌入另核對授權。
10. 源流明體：思源宋體系譜的開源衍生字型，現行專案也包含源起明體及不同地區版本，採 SIL OFL 1.1。請依官方版本說明選擇字檔，並試排標點、內文與引文。

圓體：2 個候選

11. jf open 粉圓體：justfont 以小杉圓體為基礎調整的開源繁體中文圓體，採 SIL OFL 1.1。可用實際標題與內文確認字款是否合適。
12. 文鼎 DC 清圓體（付費）：文鼎官方列出的圓體字款。選用前確認字集、產品方案與網頁使用權，不能僅因付費就推定比開源字款更適合。

手寫、書法與楷體：5 個候選

13. 馬善政手寫體（Ma Shan Zheng）：Google Fonts 提供的開源書法字體，採 OFL 授權。可先試短標題，另確認所需繁體字是否齊全。
14. 霞鶩文楷（LXGW WenKai）：以 Fontworks Klee One 為基礎擴充的開源字型，採 SIL OFL 1.1。版本與地區字形各有差異，使用前應讀專案說明。
15. 芫荽（Iansui）：以 Klee One 改造的台灣繁體中文學習用字型，帶有楷書與仿宋特徵，採 SIL OFL 1.1；它不是思源宋體衍生的明體。仍須檢查實際用字與教學場合的字形要求。
16. 標楷體（DFKai-SB）：常見於 Windows 環境的楷書字體。指定讀者裝置上的字體與自行散布字型檔，是不同的使用方式。
17. 文鼎隸書（付費）：可作為書法風格標題的候選。字款、字級與閱讀長度比「手寫體只能當裝飾」這種一律規則更值得檢查。

這份清單是試排起點。一個網站可先用一款內文字體，再視需要加入標題或強調字；增加字型時要說得出用途，並一起計算維護與載入成本。

挑選時可以確認字體是否為既有開源字型的衍生作品，因為衍生關係會影響骨架與授權。不要僅憑視覺相似就宣稱商業字體來自某個開源字體；主體字與輔助字是否協調，仍要用真實標題、內文、數字與中英文混排一起測試。

中英文搭配：當中文遇上英文字體，怎麼配才不打架

台灣網站常有中英混排。中文字的字面大小與英文字母的比例不同，同樣的 CSS 字級不一定看起來一樣大。比較時應觀察基線、字面、字重與行距；x-height 指拉丁小寫字母的高度，不能把中文字也當成有相同的 x-height。

把真實標題、價格、型號與中英句子排在同一行，比較中文與英文的視覺大小和粗細。英文的 x-height 可作為比較指標之一，仍要和中文的字面比例、基線及標點位置一起判斷。

黑體搭無襯線、明體搭襯線，可以當成容易開始的組合，也可以刻意混搭建立對比。兩種語文不必強制使用同一家族；只要在實際版面中能維持清楚的層次與閱讀節奏即可。

價格表與數值欄位若需要直向對齊，可檢查原字型是否支援等寬數字，再試 font-variant-numeric: tabular-nums。有這項字形功能時，不必另外下載一款數字字體；對齊仍要配合欄位與小數位的排版。

若希望拉丁字元用獨立的英文字體，可把它放在 font-family 前面，中文放後面。瀏覽器會依字元尋找可用字形；前面的字型若也含中文字，就可能影響結果。中文字型附帶的拉丁字也可以保留，先試排再決定是否分開。更多候選可看 英文字體推薦清單。

別從字體開始選：我用「閱讀情境反推」挑字的方法

多數人選字體的順序是錯的：先看一堆字體範例、愛上其中一款，再回頭想辦法把內容塞進去。這樣選出來的字體常常「好看但不適合」。比較好的做法剛好反過來：先定義閱讀情境，再回頭選字體。

具體做法是回答四個問題。

第一，誰在讀？讀者與使用情境會影響字體人格。生活消費品牌可測試圓體或少量手寫體，企業軟體則常從中性黑體開始；這只是候選方向，仍要用真實內容驗證。

第二，讀多久？內容是快速掃讀的登入頁，還是深度長文？短文可以容納較有個性的標題字；長文則要把可讀性放前面，優先測試適合內文的黑體或明體，避免用粗重或裝飾性強的字體承載大段文字。

第三，在什麼裝置上讀？若受眾以手機為主，就不能只在高解析桌面螢幕判斷。較細的明體套到小字級時可能不清楚，應在實際目標裝置、瀏覽器與字級上驗證。

第四，想呈現什麼品牌語氣？把冷靜、親切或典雅等描述轉成可以比較的字重、筆畫與版面，而不是直接指定某一家族。用品牌真實文案測試，會比只靠人格標籤更具體。

四個問題會形成一組條件：字形範圍、字重、閱讀長度、裝置與品牌語氣。先挑少量候選試排，再比較授權與載入成本；不必先訂一定要留下幾款的規則。

設計偏好可以參與選擇，但要和閱讀、授權及品牌用途一起衡量。喜歡某款手寫字時，可以先測試短標題；若長文辨識不清楚，就調整字級、縮小使用範圍或換字款。

選字體可以像替空間選音樂：先理解人會在這裡做什麼，再決定要陪襯還是吸引注意。這只是幫助思考的比喻，不能由產業名稱推定唯一合適的風格。

舉一個具體走法。假設你接手咖啡館品牌網站，主要在手機上瀏覽，內容是菜單、故事與活動。走完四個問題後，可先以中性黑體承載內文，再用圓體做少量標題點綴。候選字款仍要逐一核對授權，並用真實菜單與中英文混排在手機上測試；這套流程的價值是縮小範圍，不是保證幾分鐘內定案。

換一個場景。企業顧問公司的讀者多在桌面閱讀長篇報告，可以測試明體內文搭配黑體 UI。是否採用仍要看字級、行距、中英文混排與長文實讀結果。方法相同，候選組合會因情境而變。

Web Font 部署：同時檢查傳輸量與授權

字型資源的大小、請求時機與顯示策略，都會影響載入體驗。CJK 完整字集可能有較大檔案，但瀏覽器是否下載整包，要看實際 CSS 與資源配置。

假設寵物用品網站想用付費圓體，部署前有兩件事要分開確認：授權是否允許自架網頁字型，以及實際需要下載多少資源。不能因為已買桌面字型，就直接把完整字檔放上伺服器；也不能只憑字體風格推算網站會慢幾秒。

完整 CJK 字體常有較大的傳輸成本，但實際下載方式會受瀏覽器、CSS、子集與供應服務影響。部署前應查看 Network 面板中的真實傳輸量，不要只憑字形數推估。

正確的解法有幾個層次，從簡單到講究排列：

第一層，使用支援 unicode-range 的網頁字體服務。例如 Noto Sans TC、Noto Serif TC 的網頁 CSS 會把字形分段，瀏覽器依頁面需要下載對應資源。實際請求數與傳輸量仍要用開發者工具檢查。

第二層，依授權與內容考慮子集化。子集工具會產生較小字檔；unicode-range 則指定哪些字元使用某個字型資源。頁面只要用到該範圍的字元，瀏覽器仍會下載那個資源的完整檔案，不會自動逐字切割。付費字型的改作與網頁使用權須先確認，切小檔案並不會取得原本沒有的授權（見 MDN unicode-range 說明）。

第三層，用 font-display 選擇顯示策略。swap 只有極短的阻擋期，之後先顯示後備字體，字型完成下載後再替換；不同字型的字面與寬度可能造成版面位移。可依正文與品牌字的用途比較 swap、fallback 或 optional，再實測（見 MDN font-display 說明）。

第四層，比較自架與第三方服務。自架可以控制快取、版本與隱私，也能減少第三方連線；第三方服務則可能提供成熟的子集與分發。哪個更快要看主機、CDN、快取與實際使用者位置，不能只靠「少一個網域」判斷。如果網站是 WordPress，可以參考本機託管 Google Fonts 的完整教學，再用網站速度優化方法量測前後差異。

格式、子集、快取與顯示策略需要一起評估。可用 WOFF2 作為現代瀏覽器的部署選項，並只載入實際使用的字型與字重。更細的做法見 網頁字體 Webfont 完全指南；完成後請看真實傳輸量與文字顯示，而不只看設計稿。

下面是字體堆疊的示意。請把示範名稱換成實際載入或裝置可用的字型，並測試後備字體的尺寸差異。堆疊順序處理選字，不會單獨決定文字等待多久。

font-family: "英文無襯線字體", "Noto Sans TC", "思源黑體", "PingFang TC", "Microsoft JhengHei", sans-serif;

瀏覽器按字元找可用字形。若第一款英文字體沒有中文，會往後找 Noto Sans TC、思源黑體或裝置上的其他字型，最後交由 sans-serif 選擇。字型下載期間如何顯示，還受 font-display 影響；後備字型也應測試缺字、換行與版面位移。

字體授權的地雷區：免費、開源、付費，差別到底在哪

字體授權很容易被忽略，一旦用錯，可能面臨補授權、下架或重新製作的成本。下面把常見授權分成三類，方便逐項核對。

第一類，開源授權。採用 SIL Open Font License（OFL）的字體通常可用於商業網站、印刷品與 App，也允許在條款內修改與再散布。OFL 不只有「不能單獨販售字體檔」一條限制，還可能涉及保留授權文件、Reserved Font Name 與衍生字體命名；每款字體仍要讀隨附授權。

第二類，付費授權。金萱、蘭陽明體、文鼎與華康各字款的使用權，應以購買方案為準。桌面製作、網頁嵌入、App 與字檔交付可能分開規範；例如 justfont 通用授權不等於可自行上傳字檔提供 Web Font。購買前列出用途，再確認對應方案。

第三類，作業系統附帶字型。以 Windows 字型為例，Microsoft 允許在 CSS 指定讀者裝置上可用的字型，但 Windows 授權不提供把字檔複製到伺服器自架 Web Font 的權利。文件嵌入另有規則，也不能直接推廣到網站。macOS 與其他來源應各查隨附條款，不要把所有系統字型視為同一授權。

我的做法是先確認用途與字款，再選合適的授權方案。把授權文件、下載來源與購買證明一起保存；專案交接時，也要交代哪些字檔可以交付、哪些需要接手者另行取得。

讓中文字真正好看的關鍵：字距、行距、字級

選對字體只是及格，真正讓中文版面好看的是三個微調：字距（letter-spacing）、行距（line-height）、字級（font-size）。很多人字體選得很講究，這三個卻用預設值，結果整個版面還是鬆散難讀。

字距可以從字型預設值開始，再以真實標題與內文微調。標題可試少量正字距，例如 0.05em，但這只是試排值；有些字款已留足空間，拉太開反而會影響閱讀。

行距要配合字級、行長與字型。我常從中文內文 line-height: 1.6 到 1.8 試起，再觀察長文閱讀與換行。這是設計起點，並非中文或英文固定的舒適範圍。

字級、字重、間距與位置共同建立資訊層次。中文內文可從 16px 到 18px 試排，並檢查縮放與手機閱讀；標題不一定要和內文相差固定像素，只要讀者能分清結構。

例如主標題 28–32px、章節標題 22–24px、內文 16–18px，可作為某個版面的試排起點。畫面尺寸與字型不同時仍需調整；重要輔助資訊也不能因為叫「註腳」就縮得難以閱讀。字級與字重可以一起使用，不必刻意擇一。

字重也能區分重點與補充，但不同字重可能改變字形寬度與換行，需要實測。網站只載入 Regular 與 Bold 也很合理；多字重或可變字型提供的是選擇，不代表每個專案都應把所有字重用上。

排版是字體的延伸。字體選對了、這三個微調也到位，你的中文版面才真的成立。想把這一塊學得更完整，可以看我寫的排版設計實戰技巧，從字體選擇一路講到視覺層次。

把字體跟品牌綁在一起：標準字、配色、CIS 的串接

字體不是孤立的設計元素，它是品牌識別系統（CIS）的一環。一個成熟的品牌，字體會跟 Logo 標準字、品牌色、整體視覺語言串在一起，形成一致的識別。如果你只把字體當「網頁要用的字」，而沒有跟品牌整體綁定，那你的字體策略是斷裂的。

Logo 標準字與網站內文可以共用特徵，也可以透過對比建立層次。明體 Logo 搭黑體內文不一定衝突，應一起看比例、色彩與實際版面。相關方法可參考 Logo 標準字設計技巧。

再看配色。字體的粗細、明暗，會跟你選的品牌色產生互動。淺色背景配細字重明體，是文學雜誌的經典；深色背景配粗黑體，是科技品牌的常見手法。品牌色的選擇本身是一門學問，想系統性理解可以讀這篇CIS 品牌識別。字體和配色一起想，才會出現協調的視覺語言。

把主體字、輔助字、字重、混排與授權來源寫成使用規範，能讓不同製作者有共同依據。範例應涵蓋網站、簡報與社群素材，並記錄各載具需要調整的地方。

字體是品牌投資裡「別人看不出你花了錢，但少了它就是不一樣」的那一塊。它不會像 Logo 改版那樣引發話題，但它會在每一次讀者打開你網站的瞬間，默默塑造他對這個品牌的感覺。

把字型套進官網、提案簡報、社群貼圖與電子報，一起檢查是否仍能辨識為同一品牌。各載具可以有不同字級與字重；重點是用途清楚、閱讀順暢，而不是要求所有畫面完全相同。

落地清單：把選定的字體部署上線的六個步驟

讀到這裡，可以照著下面的清單把字體從「選好」推進到「上線」。

1. 釐清用途。記錄讀者、閱讀長度、裝置與品牌語氣。
2. 少量試排。從清單選候選，用相同內容比較；每多加一款字型，都確認其用途與成本。
3. 核對授權。區分製作成品、散布字檔、網頁嵌入與改作，取得實際需要的權利。
4. 實機驗證。檢查字形、標點、中英混排與不同裝置上的閱讀。
5. 量測載入。授權允許時考慮子集與 WOFF2；unicode-range 要搭配適當的資源分段，font-display 則配合版面位移測試。
6. 部署與交接。用 @font-face 和 font-family 設定字型，保存授權及版本記錄。使用 Divi 的流程可參考 Divi 自訂字體上傳教學。

如果想辨識其他網站使用的字體，可以參考Fonts Ninja 字體辨識工具查看字型名稱與樣式；辨識結果僅供研究，實際使用仍要另行取得合法字檔與授權。

選字體時，把試排結果、授權與效能記錄留下來。下次新增頁面或換人維護，就有具體依據可比對，不必重新從整張字型選單猜起。

下一次挑字型，先確認誰讀、讀多久、在哪裡讀，以及希望呈現什麼語氣。這些條件能幫你縮小候選範圍，再用授權、效能與實機可讀性完成決策。