中文字體設計指南：17 個必藏字體推薦

退一步看，不少人都這樣挑中文字體？打開設計軟體，字型選單一拉開兩百多款，從思源黑體一路滑到華康行書，盯了半個小時，最後還是退回預設那一款。挑中文字為什麼這麼累，因為中文字體從來不是「哪一款最美」的問題，而是「在你的效能預算內，哪一款最能撐起品牌人格、同時顧到讀者的眼睛」。

一句話給答案：做中文網頁，黑體是安全牌、明體撐質感、圓體賣親和、手寫體做亮點。我會在這篇把四大家族一次講清楚，給你 17 款我會真的放進工具箱的字體（含開源與商用付費），再帶你走一遍這套「閱讀情境反推選字」方法，最後把字體真正部署上線。

本篇精華

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

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

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

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

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

再看螢幕渲染。中文筆畫密集，一個「驘」字塞在手機螢幕的 16px 格子裡，筆畫全擠成一團黑，細節全糊掉。英文小寫字母筆畫疏，小字級依然清晰。所以中文字體在小字級、低解析度螢幕上的表現，是設計師必須實機驗證的，不能在設計稿的 Retina 螢幕上看好看就放行。文字繞成圓弧時，字距還會被半徑進一步壓縮，筆畫擠壓的問題更明顯，想讓標語沿著圓圈排列，可以參考Figma 環形文字的排法。

語境也得算進去。台灣用繁體中文，你選的字體必須有完整的繁體字符集（TC subset）。有些中文字體是以簡體為主、繁體為輔甚至缺字，套上去會看到方塊或缺筆畫，這在正式網站上是不能接受的。英文字體的選擇跟中文會互相牽動，這點我後面談中英搭配時會再展開。

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

先搞懂四個家族：黑體、明體、圓體、手寫體，它們在螢幕上各代表什麼人格

我不打算用「襯線、非襯線」這種西文分類硬套在中文上，那是把中文塞進別人的框架。我更喜歡用人格來分：這款字出現在螢幕上，讀者第一眼會覺得它是什麼樣的品牌在說話。

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

明體（橫細豎粗、有襯線腳，日文叫明朝）是中文的「書卷氣」。它來自雕版印刷的傳統，筆畫有明顯的起收頓挫，自帶文學、權威、古典的氣質。律師事務所、出版社、藝文品牌、深度長文的內文，明體能撐起一種黑體給不了的「重量感」。但明體在小字級、低 DPI 螢幕上容易糊，得小心驗證。

圓體（筆畫尾端收圓、整體偏圓潤）是親和力擔當。它的視覺重量輕、情緒友善，常用在生活消費、親子、餐飲、女性向品牌。圓體的風險是「太可愛」，用在 B2B 或金融這類需要嚴肅感的場景會削弱專業度。

手寫體（含書法、楷書、行書、隨筆）是情緒的放大器。它適不適合內文，要看字款、字級與閱讀長度；多數裝飾性較強的手寫體更適合標題與活動視覺。不要用「讀者三秒內彈出」這類未量測的數字替代可讀性測試。

家族	筆畫特徵	視覺人格	典型用途	最適合的產業
黑體	橫豎粗細接近、方正	現代、中性、專業	內文、UI、資訊密度高的頁面	科技、新聞、金融、後台、SaaS
明體	橫細豎粗、有襯線	傳統、權威、文學	深度長文、書封、品牌副標	出版、法律、藝文、教育、顧問
圓體	筆畫收圓、圓潤	親和、生活、年輕	主視覺標題、活動頁、CTA	餐飲、親子、美妝、生活選物
手寫體	筆觸自由、有手感	溫暖、獨特、情緒	標題點綴、裝飾字、活動 banner	文創、咖啡館、個人品牌、節慶活動

這張表可以當成每次開始新專案時，先在腦袋裡跑一遍的決策地圖。你先決定你的品牌站在哪一格，再往那個家族裡挑具體字款，範圍立刻從兩百款縮小到二十款以內。

17 款我會放進工具箱的中文字體（含開源與商用清單）

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

黑體（sans／gothic）：6 款

1. 思源黑體（Source Han Sans／Noto Sans CJK TC）：Adobe 與 Google 合作開源的 CJK 黑體，採 OFL 授權，可依授權條款商用。字重完整、語言版本齊全，適合內文與介面；是否符合品牌個性仍要實際測試（見 Google Noto Fonts 官方頁面）。
2. Noto Sans TC：Google Fonts 上的繁體中文網頁字體，同樣 OFL，已經做過網頁子集化，開箱即用。你要最快上線、不想自己處理子集，選它。
3. 台北黑體（Taipei Sans TC）：以思源黑體為基礎調整的台灣開源黑體，筆畫稍微收緊、現代感更強，免費可商用。想比思源多一點辨識度又不想花錢，這是首選。
4. 金萱黑（just-font，付費）：台灣字體設計公司 just-font 的商業黑體，細節講究、家族完整，付費取得商用授權。預算夠又想要「台灣味 + 專業感」，值得投資。
5. 文鼎黑體系列（付費）：文鼎科技是老牌中文字體廠，黑體家族齊全、品質穩定，企業商用授權。傳產、金融這類需要穩定供貨與長期授權的客戶常用。
6. 華康黑體系列（付費）：華康（DynaComware）同樣是老牌大廠，黑體選擇多。很多台灣企業的官方文件、網站沿用華康體系，要維持既有品牌一致性時會選它。

明體（serif／mincho）：5 款

7. 思源宋體（Source Han Serif／Noto Serif CJK TC）：Adobe 與 Google 的開源明體旗艦，OFL 可商用，字重齊全。想要明體質感又不想花錢，這是底線選項（見 Google Noto Fonts 官方頁面）。
8. Noto Serif TC：Google Fonts 上的繁體明體網頁字體，OFL，網頁子集化完成，適合直接當網頁字體用。
9. 蘭陽明體：以思源宋體為基礎、台灣團隊調整的開源明體，免費可商用，筆畫比思源宋更俐落，有一種「現代明體」的氣質。
10. 芫荽（iansui）：台灣社群開源的明體，以思源宋體衍生而來，免費可商用，帶一點手刻的溫度，適合想避開思源宋「過於工整」的品牌。
11. 源流明體：同樣基於思源宋體衍生的開源明體，免費可商用，強調筆畫的流暢與粗細對比，做副標或引文很有戲。

圓體（rounded）：2 款

12. jf open 粉圓體：just-font 開源的圓體，OFL 可商用，是中文免費圓體裡最知名的一款。輕快、友善，生活消費品牌的常見選擇。
13. 文鼎方圓體（付費）：文鼎的商業圓體家族，筆畫精緻度與字重選擇比開源款多，付費商用。要圓體又怕 jf 粉圓太「輕」，這是升級選項。

手寫／書法／楷：4 款

14. 馬善政手寫體（Ma Shan Zheng）：Google Fonts 上的開源中文書法體，採 OFL 授權，可依授權條款商用，適合短標題點綴。
15. 霞鶩文楷（LXGW WenKai）：社群開源的楷書風字體，免費可商用，筆觸溫潤、閱讀性在書法體裡算不錯，想做出文創、教育、人文氣質很合適。
16. 標楷體（DFKai-SB）：常見於 Windows 環境的楷書字體。系統可用不等於能把字體檔打包上傳成 Web Font；不同作業系統也不保證安裝同一字體。
17. 文鼎隸書（付費）：文鼎的商業隸書體，正式商用授權，常用在書法氣質強烈的標題、活動主視覺。手寫與書法體一律只用來當亮點，不要當內文。

這 17 款不是「全部都裝上去」，而是讓你心裡有一個工具箱。真正上線時，一個網站通常只需要一到兩款主體字，外加一款點綴用的特殊字體就夠了。裝太多反而失焦。

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

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

台灣網站幾乎都是中英混排。品牌名、產品型號、數字單位、CTA 按鈕，英文無所不在。而中文方塊字和英文字母的節奏天生不同：中文是等寬的格子，英文是寬窄不一的字母流。把它們擺在同一行，如果沒處理好，會出現一種很常見的難看：中文字偏大、英文字偏小，或者兩者的 x-height（小寫字母高度）對不上，基線高低不一，整行歪歪斜斜。

中英搭配的第一個原則是對齊 x-height 與字重。你選了一款思源黑體 Regular 當中文內文，英文就配一款 x-height 接近、字重也接近的無襯線字（例如常見的系統 sans 或開源英文字體）。兩者的視覺重量一致，混排才會穩。配對時要實際把中英文擺在同一行看，不要只看單獨樣本。

第二個原則是家族風格一致。中文用黑體，英文就用無襯線；中文用明體，英文就配襯線體（serif）。不要中文是明體、英文卻配一款幾何無襯線，兩種氣質打架。這個對應關係其實有歷史脈絡：中文明體對應英文襯線體，兩者都來自印刷傳統；中文黑體對應英文無襯線，兩者都是為了螢幕與現代閱讀而生。

第三個原則是讓數字有專屬的字體。中文網站裡的數字（價格、統計、年份）常常是視覺焦點，用一款 tabular figures（等寬數字）的英文字體來顯示，對齊整齊、專業感強。很多設計師忽略這一點，讓數字跟著中文字體走，結果數字寬窄不一，價格表排起來歪七扭八。

在 CSS 裡，這一切都靠 font-family 的堆疊順序達成。把英文字體寫在前面、中文字體寫在後面，瀏覽器會優先用英文字體顯示拉丁字符，遇到中文字符才回退到中文字體。順序寫反了，你的英文會被中文字體裡附帶的拉丁字符顯示，通常很醜。英文字體的完整選擇又是另一門學問，想深入研究可以看我整理的英文字體推薦清單，從襯線到無襯線到手寫體一次收錄。

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

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

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

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

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

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

第四，品牌人格在哪一格？回到前面那張家族表，你的品牌是冷靜專業、還是溫暖親和、還是權威古典？這一格定了，家族就定了。

這四個問題答完，你會得到一組條件：家族（黑／明／圓／手寫）、字重要求（輕或重）、可讀性門檻、裝置限制。把這組條件拿去篩那 17 款字體，通常會剩三到五款候選。再從候選裡挑一款做主體字、一款做標題或強調字，組合就出來了。

這個方法的好處是它把「我喜歡」排除在決策之外。選字體不是選你喜歡的，是選讀者眼睛和品牌定位需要的。你喜歡某款手寫體沒關係，但如果它傷了可讀性，它就只能當裝飾，不能當主力。

打個比方，選字體有點像幫餐廳挑音樂。一家高級法式餐廳放重金屬，音樂再好聽也是錯的，因為跟用餐情境衝突；一家搖滾酒吧放古典樂，同樣突兀。字體之於網站，就是背景音樂之於餐廳，它必須服務於情境，而不是反客為主。先想清楚你在什麼樣的餐廳、服務什麼樣的客人，再回頭挑音樂，這就是我說的「反推」。

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

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

Web Font 的效能真相：一款中文字體為什麼能拖垮你的網站速度

這是最多設計師踩雷的地方。中文字體因為字數多，檔案天生就大，而 Web Font 的載入機制會把這個「大」放大成「慢」。

以寵物用品品牌這類網站為例，常見的狀況是：為了「可愛感」，把一款付費圓體整包上傳到伺服器當 Web Font，結果首頁光字體檔就將近 10 MB，行動裝置開啟要等好幾秒文字才跳出來，網站速度分數難看到見不得人。更麻煩的是，這款付費字體的授權往往只涵蓋「桌面使用」，把它丟上網路讓全世界下載，其實已經踩到授權紅線了。一個動作，同時犯了效能和授權兩個錯。

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

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

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

第二層，自己做子集化（subset）。如果你要用自架的字體，就得用工具把字體拆成只含常用字的子集，或用 unicode-range 技術，讓瀏覽器只抓需要的字（見 MDN Web Docs 的 unicode-range 說明）。這對付費字體尤其重要，因為你可能根本不被允許把完整字體公開。

第三層，用 font-display 控制載入行為。設定 font-display: swap，讓瀏覽器在字體下載完成前先用系統字顯示，文字不會空白等待。這是 Web Font 的基本功（見 MDN Web Docs 的 font-display 說明）。

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

Web Font 是一整套學問，從格式（woff2 優先）、載入策略、到快取設定都有講究。如果你想往這個方向深挖，我另寫了一篇網頁字體 Webfont 完全指南，把載入優化講得更細。記住一個原則就好：中文字體的「美」永遠不能建立在「慢」上面，慢的網站連訪客都留不住，字體再美也沒人看到。

這裡給你一個可以直接抄的 fallback 字體堆疊。核心想法是：英文優先（讓拉丁字符用英文字體顯示）、中文主體字居中、最後放系統內建字當保險，確保字體還沒載完時畫面也不會崩。

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

這行堆疊的邏輯是：瀏覽器遇到拉丁字符，先用最前面的英文字體；遇到中文字符，英文字體沒有對應字符，就往下退到 Noto Sans TC；如果 Noto 還沒載入完成，再退到蘋果系統的 PingFang TC 或微軟的微軟正黑體，確保文字立刻出現而不空白。最後的 sans-serif 是終極保險。把這個堆疊想成一道防線，每一層都接得住，讀者就不會看到醜陋的方塊或漫長的空白。

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

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

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

第二類，付費商用。像 just-font 金萱、文鼎、華康的字體，需要購買商用授權才能用。授權方式很多種：依使用者人數、依網站流量、依使用範圍（網頁／印刷／影片），買之前一定要看清楚授權涵蓋的範圍。你買的是「桌面版授權」，通常不代表你能把字體檔丟上網路當 Web Font；要用在網頁，得買「網頁字體授權」或確認授權涵蓋 Web Font 嵌入。

第三類，作業系統內建。最經典的誤解就在這裡：標楷體（DFKai-SB）、新細明體這類隨 Windows、macOS 出貨的字體，是微軟、蘋果跟字體廠簽約內建給你看的，不代表你可以把字體檔拿出來、重新打包、上傳到自己的伺服器當網頁字體。你可以「指定」瀏覽器用標楷體顯示（在讀者剛好有裝的前提下），但你不能把字體檔本身散布出去。這條線很多人搞混，把內建字體當免費 Web Font 用，其實已經侵權了。

授權類型	能否商用	能否上傳伺服器當 Web Font	代表字體
開源（OFL）	可以	依該字體授權條款；OFL 通常允許	思源黑體、思源宋體、jf open 粉圓體、台北黑體
付費商用	購買授權後可以	需確認授權涵蓋 Web Font 嵌入	金萱黑、文鼎系列、華康系列
作業系統內建	依作業系統與字體授權	通常不可自行散布；需查原授權	標楷體、新細明體

我的實務原則是：商用網站的字體，能開源就開源；要付費，就買到對的授權範圍；絕對不把內建字體或來路不明的字體丟上伺服器。授權出事的賠償金，遠比你省下的字體費高。

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

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

字距對中文格外重要。中文方塊字本身結構緊湊，預設字距常常顯得擠。標題適度拉開字距（letter-spacing 設個 0.05em 到 0.1em），會立刻有呼吸感；但內文字距反而不能拉太多，否則斷字閱讀不順。英文的字距邏輯不能直接套用到中文，因為英文是字母流、中文是方塊，節奏完全不同。

行距是中文閱讀舒適度的命脈。中文筆畫密集，行距太擠，眼睛在行與行之間找不到換行點，讀沒幾行就累。我的經驗值是中文內文的 line-height 設在 1.6 到 1.8 之間最舒服，英文通常 1.4 到 1.5 就夠。長文尤其不能省行距，行距是讀者留不留得下來的隱形因素。

字級決定資訊層次。一個頁面要有清楚的視覺階層：主標題、副標題、小標、內文、註腳，每一層字級要拉開差距，讀者眼睛才知道往哪走。中文內文我習慣設在 16px 到 18px（比英文常見的 14 到 16px 大一點，因為中文字筆畫多，小了會糊）。標題字級跟內文的對比要夠，不要只差 2px，那叫沒有層次。

給你一個我常用的中文網頁字級階層當參考。主標題（h1，不過在這個站是由文章標題擔綱，內文不出現 h1）落在 28 到 32px、章節標題（h2）22 到 24px、小節標題（h3）18 到 20px、內文 16 到 18px、註腳與輔助說明 13 到 14px。這個階層不是鐵律，但它是個安全的起點。關鍵是相鄰兩層的差距要讓眼睛「一眼分得出來」，而不是要瞇著眼比對。同時，中文標題別過度放大又配細字重，粗細與大小是兩個獨立的層次工具，混在一起用會讓階層糊掉。

還有一個常被錯過的細節：字重（font-weight）也是層次工具，不只是字級。同樣 24px 的兩行字，一行 Regular、一行 Bold，視覺重量完全不同。善用字重來區隔「重點」與「補充」，比一味放大字級更精緻，因為它不會撐破版面。思源黑體有七個字重可以選，就是在給你這個彈性。很多人裝了思源黑體卻永遠只用 Regular 和 Bold，等於把工具箱裡一半的工具浪費掉。

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

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

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

先看 Logo。你的 Logo 標準字（wordmark）用的是哪一款字體，會直接影響網站內文的字體選擇。Logo 如果用明體，網站主標用粗黑體就會打架；Logo 是圓體，網站用嚴肅的明體會人格分裂。Logo 標準字的設計方法，我另整理在Logo 標準字設計技巧，從中英文字體挑選到品牌一致性都講到。

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

還要補上使用規範。成熟品牌會有一份字體使用規範：主體字是哪款、輔助字是哪款、標題用什麼字重、數字用什麼字體、英文搭配哪一款。這份規範確保不管誰來做網站、做海報、做社群圖，視覺都是一致的。沒有這份規範，你的品牌視覺會隨著換設計師而漂移，一年後回頭看會發現官網、宣傳品、社群貼圖各用各的字體，像三個不同的品牌。

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

一個檢驗的方法是：把你選定的字體套用到所有接觸點（官網、提案簡報、社群貼圖、電子報），全部擺在一起看。如果視覺是統一的，代表你的字體策略有撐起品牌；如果每個載具看起來都像不同單位做的，代表字體還沒真正跟品牌綁定，只是各自好看而已。一致，才是識別的本質。

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

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

1. 釐清品牌人格與閱讀情境。用前面的四個問題（誰讀、讀多久、什麼裝置、人格在哪格）定出家族與字重要求。這一步不做，後面全白費。
2. 從 17 款清單挑出兩到三款候選。一款主體字（通常黑體或明體）、一款標題或強調字（可以是另一種家族）。不要超過三款，否則沒有重心。
3. 確認授權。開源字體讀授權檔與版本；付費字體買到涵蓋 Web Font 的授權；系統內建字體不自行抽出上傳，除非原授權明確允許。
4. 實機驗證可讀性。在中低階手機上看實際渲染，尤其明體和手寫體。設計稿好看不等於上線好看。
5. 做子集化與格式優化。在授權允許下轉成 woff2，使用 unicode-range 或子集工具減少字形；font-display 要依可讀性與版面位移取捨，不是一律使用同一設定。
6. 部署並寫進 CSS。用 @font-face 定義字體，在 font-family 堆疊裡放好中文主體字、英文搭配字、最後是系統 fallback。如果你用的是 Divi 這類頁面編輯器，可以參考Divi 自訂字體上傳教學，把字體正確掛進主題。

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

字體這件事，本質上來說是「用系統取代感覺」。把家族、授權、效能、排版、品牌這幾條線都顧到，你就不用再每次都對著兩百款字型選單發呆。挑字體會從一件累人的事，變成一件有章法可循的工程。而一份有章法的字體策略，會在讀者每次打開你網站的時候，安靜地替你的品牌說話。

下一次面對兩百款字型選單，先回頭問四個問題：誰讀、讀多久、什麼裝置、人格在哪格。答案能幫你縮小候選範圍，再用授權、效能與實機可讀性完成決策。