【網頁字體選擇指南 2026】繁體中文與英文字體推薦、免費下載來源與搭配教學 【網頁字體選擇指南 2026】繁體中文與英文字體推薦、免費下載來源與搭配教學

系統字體與 Web Font

系統字體指訪客裝置本身已有的字體，網站只在 CSS 指定名稱，瀏覽器就用該裝置的字體顯示，沒有額外下載。代價是控制不到結果：Windows、macOS、iOS 與 Android 內建的中文字體不同，同一個設定在不同裝置上，字款可以有明顯分別。

Web Font 把字體檔隨網頁傳給訪客，在字體成功載入、所需字元受支援時，不同裝置都會使用你指定的字款，有助提高品牌一致性。Google 的 web.dev 技術文件提醒，字體的載入與替換會影響文字顯示及版面位移，所以要多做一步顯示策略的設定；重視品牌一致的網站值得採用 Web Font，以發佈文字為主的網站，編排良好的系統字體設定也可以接受。

Google Fonts

Google Fonts 是多數人起步的平台，收錄的中英文字體以開源授權為主，可直接用於商業網站。取得方法：在平台以精確字體名搜尋，例如「Noto Sans HK」，進入字體頁選好字重、複製嵌入碼，再用 CSS 的 font-family 指定字族；繁體中文有 Noto Sans TC、Noto Sans HK 與 Noto Serif TC 等選擇。

Adobe Fonts 與 justfont

字體商平台是第二條路。Adobe Fonts 隨 Adobe 訂閱提供大量字體，網頁應用必須用它的嵌入碼，官方授權說明訂明不可把字體檔下載後自行寄存，取消訂閱後網站會轉用後備字體。台灣字體公司 justfont 橫跨免費與付費：jf open 粉圓開源免費，金萱與蘭陽明體屬付費字體，網頁用途另設方案。

官方下載與自行寄存

第三條路是到字體的官方專頁下載檔案，放進自己的網站，用 CSS 的 @font-face 引用。自行寄存不依賴第三方服務，字體版本自己控制；責任同樣歸你，檔案更新、載入設定與授權核實都要自己跟。

原則一：可讀性優先

內文是網站被讀得最多的部分，可讀性排第一。一款字體放大做海報漂亮，縮到手機屏幕未必讀得舒服；筆畫花巧的美術字體放到長段落，訪客讀幾行眼睛就累。檢查方法：把你自己的真實內文貼進字體的預覽欄，縮到接近手機的顯示尺寸，從頭讀一次。

假設你經營一間診所，服務頁全是收費表與注意事項，訪客是逐字讀的，這種頁面用筆畫清晰的無襯線黑體，比美術字體穩妥得多。

原則二：品牌風格與網站定位

訪客讀內容之前，字體已經先傳遞了氣氛。明體筆畫有起有收，帶傳統與信賴感，講究穩重的機構用它順手；黑體乾淨直接，資訊量大的網站靠它保持清晰；圓體與手寫風格親切，適合想拉近距離的品牌。

一個可行的方法：先寫下三個你希望訪客用來形容品牌的詞，例如「專業、可靠、不花巧」，再拿這三個詞去對字體的風格，而不是先愛上一款字再找理由說服自己。假設你的網店走年輕路線，標題用圓體配鮮色成立；同一款圓體放到講投資風險的網站，與內容需要的謹慎感就有距離。字體與顏色一樣，要先對品牌詞；色系怎樣配合轉換與搜尋，看〈網站配色與 CRO/SEO〉。

原則三：字體數量與視覺一致性

常見的起步建議是兩至三款，一款標題、一款內文，最多加一款特別用途，例如專門應付英文與數字的字體；超過這個數，版面容易變散，商品與板塊多的網店尤其要克制。

兩三款是起步建議，不是規定：少於這個數也可以，只用一款字族，靠字重與字級同樣能做出層次；Google 的官方文件亦提醒，一次請求過多字族會拖慢載入，以少量字體規劃正好配合載入速度的限制。一致性還包括字重與字級的紀律，標題、小標、內文與按鈕各自固定字重與大小，層次自然出現。

黑體選擇

香港網站的內文與介面，多數由黑體開始。Noto Sans TC 與 Noto Sans HK 是同一家族的地區版本，同樣免費開源，在 Google Fonts 以字體名搜尋即可取得：TC 版對應台灣通行字形，HK 版對應香港字形標準，並支援可變字重；選哪個版本，取決於讀者與內容。

台北黑體由台灣造字團隊翰字鑄造 JT Foundry 發佈，基於思源黑體改作，以 SIL OFL 1.1 開源授權提供，容許個人及商業使用，官方下載頁可直接取得；下載頁同時標明目前為 Beta 版本，採用前留意版本狀態。它筆畫相對粗壯，用在標題有存在感；同樣是台灣出品的繁體字體，用到香港網站之前，字形與字符照樣要檢查。

明體與楷體選擇

講求傳統與質感的網站會用到明體。Noto Serif TC 是免費開源的明體，在 Google Fonts 搜尋字體名即可套用，標題與引文用它有書卷味；內文用明體還是黑體沒有標準答案，長文讀起來是否舒服，很大程度看字級與行距的配合。

楷體自帶手寫的溫度。芫荽基於日本字體 Klee One 改作，是開源繁體字體，官方定位貼近台灣需求與學齡教育用途，並交代了字集限制，可在官方 GitHub 專案的 Releases 頁下載最新版本。它的筆觸親切，適合品牌故事、菜單這類想拉近距離的段落；用於長文前，先以實際字級與內容試讀，並檢查所需字元。

圓體選擇：jf open 粉圓

粉圓由 justfont 以 SIL Open Font License 開源發佈，官方介紹頁列明可免費商用。圓體筆畫圓潤，天然帶親和力，甜品店、母嬰用品與教育中心用它做標題，比黑體溫柔，比楷體整齊；大段內文用圓體會略嫌鬆散，把它放在標題、按鈕與短文案的位置，效果最好。

付費選擇：金萱與蘭陽明體

免費選擇之外，justfont 的金萱與蘭陽明體走付費路線，經官方商店取得：金萱筆畫溫潤細緻，講質感的品牌用它建立辨認度；蘭陽明體是明體，適合標題與長文章節。

付費方案提供所購字款與字重的使用權，字重範圍、更新安排與適用用途，須看商品及授權條款。justfont 的通用授權容許一般 Logo 與標準字設計，商標註冊須另行接洽，而且通用授權不包含網頁字體嵌入，Web Font 要走它適用的服務或另議；這些限制只約束付費字體，開源的粉圓按 OFL 條款使用，不受影響。

香港字形與常用字涵蓋

香港網站選繁體字體，最後必做的一步是字形與字符檢查。台灣與香港的字形標準，在不少字的寫法上有差異，Noto Sans 的 TC 版與 HK 版的分別正在這裏。字形之外還要留意字集：HK 版標明對應香港字集，也不等於收齊你網站所需的全部文字。無論選哪款，都要用實際版本逐字驗。

同一組字在 Noto Sans TC 與 Noto Sans HK 的顯示對照（示意）

檢查方法直接：把公司名稱、負責人姓名、地址街名（例如「深水埗」「鰂魚涌」）、產品名與宣傳標語，逐句貼進 Google Fonts 字體頁的預覽輸入欄，看有沒有字元跳出另一款字體；下載自存的字體，就在自己的測試頁用真實內容逐段檢查。單靠外觀未必看得出 fallback，可在 Chrome DevTools 的 Elements → Computed → Rendered Fonts 確認實際使用的字體。

缺字時，瀏覽器會先嘗試 font-family 名單中的後備字體，再按自身機制尋找裝置上的其他字體，仍找不到字形便可能顯示缺字方框；這一步在選字階段做最省事，免得整站上線後才發現問題。

內文與介面字體

Inter 為屏幕閱讀而設計，官方專案標明較高的 x-height 與等寬數字功能，以 OFL 1.1 開源發佈，可在官方專案下載，或經 Google Fonts 套用。Roboto 與 Open Sans 同樣開源免費、風格中性，可列入內文候選；與中文字體搭配時，再比較字級、視覺粗幼及標點的協調，用真實段落並排試讀後再定。

標題與品牌字體

Montserrat 是幾何無襯線體，筆畫由圓形與直線構成，大型標題用它有現代感；Raleway 線條修長，可考慮用於希望呈現纖細感的標題，配搭時留意最細字重在小尺寸下的可讀性。兩款同樣開源免費，在 Google Fonts 搜尋字體名，用真實標題文字預覽後再套用。

付費英文字體

付費一級有兩款經典：Avenir 結合幾何骨架與人文筆觸，溫文而不呆板；Gotham 美式幾何感強，字重家族齊全。兩者經字體商 Monotype 按授權方案出售，網頁用途的範圍與價錢以字商平台為準。何時值得考慮：品牌需要特定字款建立識別，或免費字體的字重與字元配搭滿足不到設計要求；預算緊的話，先確認免費字體真的應付不到，再進入這一級。

標題與內文的字體分工

標題與內文不必用同一款字體，常見的分工是一款有性格做標題、一款中性做內文；中文內部最常見的組合，是明體標題配黑體內文，明體給標題書卷氣，黑體保住內文的清晰。假設一間精品酒店，標題用 Noto Serif TC 營造格調，內文用 Noto Sans TC 保持清晰，層次與氣氛同時到位。全黑體的配搭更現代，靠粗標題配正常字重內文的對比一樣有層次；甜品店或兒童品牌可以在標題加圓體，內文保持黑體，親切與可讀各自守住。全站只用一款也可以，此時層次靠字級、字重與顏色做出來。

中英文比例與實際字重

中英文字體的視覺重量不一樣：英文的 400 字重與中文的 400 字重並排，未必一樣粗細，同一行中英文要並排看效果，不是只看數字。中文字面方正，英文字母相對窄長，混排時字級亦要互相比對。價錢、型號、日期這類英文數字多的版位，記得檢查數字對齊與粗幼協調，Inter 的等寬數字正是為這種位置而設；實際怎樣在 CSS 分配中英文字體的顯示次序，設定一章有完整示例。

免費、開源與付費授權

系統字體不分發檔案，你只是在 CSS 引用訪客裝置上的字體，這個「使用」不包括抽取、上傳或分發字體檔本身；開源字體按條款直接使用，多數容許商用與修改，分發字體檔時要保留版權與授權資料，改作另須遵守保留字體名稱等條件；訂閱與付費字體按購買範圍生效。

桌面、網頁與商標用途

商業授權常按用途分開賣：桌面版用來在你電腦上設計，網頁授權用來把字體嵌入網站。對這類按用途拆分的授權，桌面版不一定涵蓋網頁用途，買之前先確認方案範圍；OFL 開源字體則沒有這道牆，按同一條款在桌面與網站使用，官方 FAQ 亦容許以 @font-face 自行寄存。商標用途不要一概而論：Adobe 容許以授權字體製作標識、標識可註冊為商標，但字體軟件與字形設計本身不能據為己有；justfont 的通用授權容許一般 Logo 設計，商標註冊須另洽。Logo 要不要另外取得授權，答案在該字體該版本的條款裏，買之前讀清楚，或者直接問字廠。

網站字體的授權流程

第一步，核對官方條款與實際用途：列出你會怎樣用，網頁嵌入、製作標識、印刷宣傳品，再打開字體官方的授權頁逐項對照，留意網頁授權有沒有流量、域名數量或年限條件。

第二步，取得適用的使用授權：開源字體按條款下載使用即可，不必另行申請或購買；訂閱或付費字體，就購買對應用途的方案，網站要用，確認方案包含網頁用途，而不是只買桌面版湊合。

第三步，保存授權文件與確認有效期：授權書、收據與條款存到同一個資料夾，網站交接或審計時拿得出來；訂閱制的記下續期日，Adobe 訂明取消訂閱後網站會轉用後備字體，已輸出的圖檔與印刷品不受影響，但網站要繼續顯示該字體，就得保持服務有效。

平台嵌入碼與 @font-face

用 Google Fonts 一類平台，做法分開兩段：嵌入碼是 HTML，貼在頁面的 head 區域；字族指定是 CSS，放在樣式表或 style 標籤內。嵌入碼由介面按你選的字體、字重與顯示參數生成，到介面複製，不要自己拼網址。

<!-- 在 Google Fonts 介面選好字體後複製的嵌入碼，放在 head 內 -->

<link rel="stylesheet" href="（介面生成的樣式表網址）">

/\* 之後在 CSS 指定字族 \*/

body {

font-family: "Noto Sans HK", sans-serif;

}

自行寄存的字體用 @font-face 定義：這條 CSS 規則為字體自訂名稱、指定檔案來源與字重，再交給 font-family 使用。下面的示例用本地路徑，檔名要換成你實際持有而且已取得適用授權的字體檔，字重數值要與實際檔案對應。

@font-face {

font-family: "MySiteHK";

src: url("/fonts/mysite-hk-regular.woff2") format("woff2");

font-weight: 400;

font-display: swap;

}



@font-face {

font-family: "MySiteHK";

src: url("/fonts/mysite-hk-bold.woff2") format("woff2");

font-weight: 700;

font-display: swap;

}



body {

font-family: "MySiteHK", "Noto Sans HK", sans-serif;

}

示例後備名單中的 Noto Sans HK，只有在已載入或訪客裝置已安裝時才用得上；單寫名稱不會令瀏覽器下載它，找不到時會繼續用名單後面的字族。

font-family 排序與替代字體

font-family 是一張有次序的名單：瀏覽器逐個字元由左至右找，第一個備有該字元的字體就被選用。中英混排的網站把英文字體排在前面、中文字體排在後面，字母與數字會用英文字體顯示，中文字元自然落到中文字體，兩邊各取所長。

/\* 英文字體在前、中文字體在後，末端通用字族做防線 \*/

body {

font-family: "Inter", "Noto Sans HK", sans-serif;

}

中英混排的 font-family 名單次序（示意）

名單末端要有通用字族（sans-serif 或 serif）做最後防線，字體載入失敗或缺字時，訪客至少見到合理的一款。次序生效有前提：Inter 與 Noto Sans HK 都要已載入或已安裝，單寫名稱不會自動下載。

WordPress 套用字體

WordPress 的套用入口視乎主題，可照三步走。第一步，確認主題類型：區塊主題從「外觀 → 編輯器」進入後有「樣式」（Styles）面板，內裏的 Typography 一項可調字體設定；傳統主題則看「外觀 → 自訂」，有沒有字體選單因主題而異，入口說明見WordPress 官方的 Styles 文件。

第二步，載入字體：嵌入碼可由主題設定或外掛引入，用外掛的話看更新日期與評分。

第三步，驗證：前台重新載入，檢查標題與內文的字款是否已轉換。若第一步發現主題兩個入口都沒有字體設定，先完成字體載入，再把 font-family 寫進「附加的 CSS」，一樣生效。

區塊主題的 Styles Typography 設定位置（示意）

字級、行距與字重

字級以訪客在手機上不用放大頁面就能讀為底線，寧大勿小；中文方塊字比拉丁字母密，行距要預得比英文內文寬鬆，段落才不會擠成一團；字重用來做層次，標題粗、內文正常，強調才動用額外的粗體或顏色。下面是一組試排起點，數值按字體與內容調整，不是規定值。

/\* 試排起點，按字體與內容調整 \*/

body {

font-size: 16px;

line-height: 1.8;

}



h2 {

font-weight: 700;

}

可變字體在這裏派上用場：Noto Sans HK 支援字重軸，一款檔案已能調出不同字重。

中文字體載入與 font-display

中文字體的字元數量遠超英文，載入要有安排。控制手段按優先次序：先減少要載的字族與字重，再選 WOFF2 格式與繁體中文字集；平台另有只載入固定文字的子集參數，僅適合預先已知的固定文字，內容會變動的網站別當捷徑。Google web.dev 的字體文件提醒，自行寄存不保證比第三方服務快，採用前要實際量度。顯示策略由 CSS 的 font-display 控制：swap 會先用後備字體顯示、字體到達後替換，想盡早見到文字可先考慮它，再檢查替換時的版面位移；對位移特別敏感的版位另行取捨。字體之外，圖片亦會影響載入，壓縮與格式的處理方法見〈處理圖片為網站提速〉。

電腦與手機顯示檢查

上線之前，照這張清單逐項確認一次：

• 在 Windows、macOS、iOS 與 Android 各開一次網站，對比標題與內文的字款是否一致
• 確認選字時檢查過的專有名稱與香港用字，在正式頁面顯示正常，沒有字元跌進後備字體
• 在手機上檢查按鈕、選單與表單提示文字，小尺寸的位置最容易出事
• 查看中英文並排的段落與價錢數字，字重與對齊是否協調
• 以慢速網絡載入一次，觀察後備字體轉換至正式字體的過程是否可以接受