Physical Address
304 North Cardinal St.
Dorchester Center, MA 02124
思源黑體 Noto Sans TC – 由 Google 提供的免費線上 Web Font，讓你免費就能擁有好看的中文字型
今天除了要教你在網站中直接載入 Google Fonts 當中的 Noto Sans TC 字體之外，也要告訴你如何改善網站載入字體前，會預先載入 Web Font 的字體，讓你的文字內容不會跳一下或消失再出現的情況。
用 AI 摘要這篇文章：
想在繁體中文網站使用好看又免費的字型，Noto Sans TC（思源黑體）是目前最成熟的選擇。這套由 Google 與 Adobe 共同開發的開源字型，現已升級為可變字型（Variable Font），任何粗細都能連續調整，而且透過 Google Fonts 託管，幾行 CSS 就能直接嵌入網站。
字型名稱：Noto Sans TC（思源黑體）
開發者：Google + Adobe
授權方式：SIL Open Font License（免費商用）
目前版本：2.004（可變字型，支援 Thin 100 到 Black 900 連續字重軸）
託管平台：Google Fonts
官方頁面：https://fonts.googleapis.com/css2?family=Noto+Sans+TC
開發者：Google + Adobe
授權方式：SIL Open Font License（免費商用）
目前版本：2.004（可變字型，支援 Thin 100 到 Black 900 連續字重軸）
託管平台：Google Fonts
官方頁面：https://fonts.googleapis.com/css2?family=Noto+Sans+TC
目錄
什麼是 Noto Sans TC？為什麼它是繁體中文網站的首選字型
Noto Sans TC 是 Noto 字型家族的繁體中文無襯線（Sans-Serif）成員，專為台灣、澳門等使用繁體中文的地區設計。名字裡的「TC」代表 Traditional Chinese。它與 思源黑體 Source Han Sans（Adobe 端名稱）和 Noto Sans CJK（Google 端名稱）本質上是同一套字型，只是品牌與打包方式不同。
截至 2026 年 5 月，Noto Sans TC 已更新至 2.004 版，從原本的 8 個靜態字重升級為完整的可變字型（Variable Font）。字重軸從 Thin (100) 到 Black (900) 連續可調，設計師不再受限於離散的字重選項。字元涵蓋約 20,305 到 20,950 個字形，支援 Unicode 16.0，幾乎不存在缺字問題。
Noto 這個名字來自「No Tofu」。當裝置缺少某個字元的對應字型時，系統會顯示一個空白方塊，看起來像一塊豆腐。Google 的目標是讓所有語言的所有字元都能正確顯示，不再出現任何「豆腐」。對繁體中文使用者來說這個理念特別重要，因為繁體中文字元數量龐大，許多字型為了控制檔案大小會省略罕用字，導致某些人名或地名顯示不出來。
繁體中文網站長期面臨一個現實問題：不同作業系統的預設字型參差不齊。Windows 用微軟正黑體，macOS 用蘋方體，Linux 則看發行版本。透過 Web Font 嵌入 Noto Sans TC，可以確保每一位訪客看到的都是同一套字型，品牌一致性不再受限於訪客的裝置。這不只影響美觀，也關係到網站的整體使用者體驗，對SEO 排名也有間接的正面影響。
Noto Sans TC 字重與設計特色
Noto Sans TC 的可變字型架構，讓字重不再是「七選一」的離散題，而是 100 到 900 之間任意數值的連續光譜。在 CSS 中可以用 [email protected] 語法載入完整範圍，也可以只指定需要的特定值。
從設計角度來看，Noto Sans TC 屬於中性平衡的無襯線黑體。筆畫粗細對比適中，不是極端現代的超細線條風格，也不像傳統印刷黑體那麼厚重。在 12-14px 的正文環境下依然清楚易讀，放大到標題尺寸也不會顯得空洞。這種「大小通吃」的特性，是它成為網頁字型主流選擇的關鍵。
實務上我建議根據網站類型來決定載入策略：
- 部落格或內容網站：Regular (400) + Bold (700) 兩個字重就夠用，載入成本最低
- 企業官網：Light (300) + Regular (400) + Medium (500) + Bold (700)，層次感更豐富
- 設計感強的品牌站：利用可變字型的連續軸，搭配 Thin 與 Black 創造粗細反差的視覺張力
選擇一個好的WordPress 佈景主題也會影響字型的載入效率，因為有些主題本身就自帶 Google Fonts 整合功能。如果你需要更精緻的搭配，可以讓 Noto Sans TC 負責標題和正文，再搭配 Noto Serif TC 作為引用區塊的字型，形成 Sans/Serif 的雙字型組合。搭配 CSS Gradient 或 CSS Background Patterns 等視覺工具，整體設計會更有層次。
如何在 Google Fonts 取得 Noto Sans TC 嵌入碼
整個流程不超過五分鐘。前往 Google Fonts 的 Noto Sans TC 頁面，搜尋框也可以直接輸入「Noto Sans TC」找到。
進入字型頁面後，勾選需要的字重。頁面右上角的「Get font」按鈕會帶出嵌入碼。在嵌入碼區塊，Google Fonts 提供三種嵌入方式，我建議直接選 Standard（link 標籤），因為它的載入效能最好。嵌入碼長這樣：
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;700&display=swap" rel="stylesheet">注意連結中的 wght@400;700，這代表只載入 Regular 和 Bold 兩個字重。如果你使用可變字型的連續軸，可以改成 [email protected]，但這會讓瀏覽器下載包含完整字重範圍的字型檔案。對大多數網站來說，指定離散字重仍是更節省頻寬的做法。
想知道目前網站的載入速度表現，可以參考我們的網站速度測試分析文章。
三種嵌入方式比較
Google Fonts 提供三種嵌入方式，都能載入 Noto Sans TC，但效能和適用場景差異不小。
方法一：Standard（link 標籤），最推薦。在 HTML 的 <head> 加入 link 標籤，瀏覽器在解析 HTML 的階段就會開始下載字型，不需要等到 CSS 解析完畢。兩個 preconnect 標籤會提前建立與 Google 伺服器的連線，縮短等待時間。如果你用的是 WordPress 快取外掛，HTML 通常會被快取，link 標籤在快取命中時也能立刻生效。搭配WebP 圖片格式一起優化，整體WordPress 速度會有更明顯的提升。
方法二：@import，適合無法修改 HTML 的情況。把 @import 語法放在 CSS 或 <style> 標籤裡就能用。但 @import 會等到瀏覽器解析到這行 CSS 時才開始下載字型，跟 Standard 比起來多一次延遲。能用，但不是首選。
方法三：JavaScript 動態載入。可以更精細地控制載入時機，例如延遲載入或條件式載入。通常只在需要跟前端框架深度整合時才會派上用場。對大多數網站來說 Standard 已經夠好。
| 比較項目 | Standard (link) | @import | JavaScript |
|---|---|---|---|
| 載入效能 | 最佳 | 較差（多一次延遲） | 中等（可 async） |
| 設定難度 | 簡單 | 簡單 | 中等 |
| 瀏覽器支援 | 全部 | 全部 | 需啟用 JS |
| preconnect 支援 | 原生支援 | 不支援 | 原生支援 |
| 適用場景 | 大部分網站 | 無法改 HTML 時 | 前端框架整合 |
除非有特殊限制，一律選 Standard。
WordPress 網站套用 Noto Sans TC 的三種做法
WordPress 是台灣使用率最高的 CMS。套用 Noto Sans TC 有幾種做法，從簡單到進階都有對應方案。如果不確定怎麼選佈景主題，可以先看我們的WordPress 主題挑選指南。
做法一：透過佈景主題自訂器加入 CSS
最推薦新手的方法，不需要安裝外掛，也不用動程式碼檔案。
- 進入 WordPress 後台，前往「外觀 > 自訂」
- 找到「額外 CSS」（Additional CSS）區塊
- 貼上以下 CSS
- 儲存並發佈
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;700&display=swap');
body {
font-family: 'Noto Sans TC', sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Noto Sans TC', sans-serif;
font-weight: 700;
}這種方式的優點是安全：佈景主題更新不會覆蓋掉自訂器裡的 CSS，因為這些設定存在資料庫裡。缺點是用了 @import，效能不如 Standard link。
做法二：使用外掛在 head 插入 link 標籤
裝一個「Insert Headers and Footers」之類的外掛，在 <head> 區段插入 Standard link 標籤：
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;700&display=swap" rel="stylesheet">再到「外觀 > 自訂 > 額外 CSS」加入 font-family 宣告。這樣就能同時享有 Standard link 的效能優勢和 WordPress 後台的便利性。
做法三：直接修改子主題的 header.php
把 link 標籤直接寫進子主題（Child Theme）的 header.php 裡，父主題更新不會影響到自訂內容。這是最直接的做法，但建議只用子主題操作，避免更新時遺失修改。選擇 WordPress 主機時，最好選擇支援完整檔案存取權限的方案。
定義 CSS font-family 讓字型生效
不管用哪種方式載入，都需要在 CSS 裡宣告 font-family：
body {
font-family: 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif;
}我把蘋方體和微軟正黑體列在 fallback 位置，意思是 Noto Sans TC 載入失敗時，瀏覽器會依序嘗試系統內建的繁體中文字型。如果想讓標題和正文用不同字重，可以這樣寫：
body {
font-family: 'Noto Sans TC', sans-serif;
font-weight: 400;
}
h1, h2, h3, h4, h5, h6, .entry-title {
font-family: 'Noto Sans TC', sans-serif;
font-weight: 700;
}確保嵌入碼裡載入了對應的字重，否則瀏覽器會用演算法模擬粗體，效果通常不好。字型選擇雖然不是直接的排名因素，但它影響停留時間和閱讀體驗，間接影響SEO 外掛設定的成效。如果你的網站還在猶豫主機，可以參考我們的Bluehost WordPress 完整教學，從主機端打好速度基礎。
font-display: swap 與中文字型載入效能
中文字型最大的技術挑戰是檔案太大。一套英文字型可能幾十 KB 搞定，繁體中文隨便就是好幾 MB。字型載入過程中的使用者體驗就變得非常關鍵。
當瀏覽器遇到 Web Font 的 CSS 宣告時，有兩個常見的惱人現象：
- FOIT（Flash of Invisible Text）：瀏覽器等待字型下載，下載期間文字完全不可見。使用者看到空白頁面，然後文字突然蹦出來。
- FOUT（Flash of Unstyled Text）：瀏覽器先用系統字型顯示文字，下載完再替換。文字會先以預設字型呈現，然後「跳一下」變成目標字型。
兩種都不理想，但 FOUT 比 FOIT 好很多，因為至少使用者先看到內容。根據 Google 的font-display 官方說明文件，font-display: swap 告訴瀏覽器「字型沒下載好就先用後備字型」，這正是解決 FOIT 的標準方案。Google Fonts 從 2019 年開始原生支援 display=swap 查詢參數，現在的嵌入碼已自動包含，不需要額外設定。
進階載入效能優化
基礎的 font-display: swap 只是起點。如果你認真看待載入速度與 SEO 表現，還有幾個技巧可以讓 Noto Sans TC 載得更快。
嚴格控制載入的字重數量
每多一個字重，瀏覽器就得多下載一組完整的字型檔案。雖然可變字型讓字重變成連續軸，但載入完整範圍（100..900）的檔案仍然比只載入兩個離散字重大。先用 Regular + Bold 上線，如果設計確實需要更多層次再逐步增加。每次加字重之前，用瀏覽器開發者工具的 Network 面板看看實際增加的下載量。
善用 preconnect 提早建立連線
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>preconnect 讓瀏覽器提前完成 DNS 查詢、TCP 連線和 TLS 握手，首次造訪時可以省下 100-300 毫秒。如果你的網站有啟用 Cloudflare CDN，效果會更明顯，因為 Cloudflare 的邊緣節點通常離 Google CDN 節點很近。
瀏覽器快取與 font-display: optional
Google Fonts 的字型檔案有很長的快取時間（通常一年），首次載入後後續造訪幾乎不需要重新下載。如果你極度在乎首次載入速度，可以改用 font-display: optional，讓瀏覽器只在字型已快取時才使用 Web Font，否則用系統字型。但這會犧牲字型一致性。搭配 WordPress 快取外掛一起使用，整體載入速度改善會更顯著。
Noto Sans TC 與其他中文字型比較
| 比較項目 | Noto Sans TC | Noto Serif TC | 微軟正黑體 | LXGW WenKai |
|---|---|---|---|---|
| 類型 | 無襯線黑體 | 襯線宋體 | 無襯線黑體 | 手寫楷體 |
| 授權 | 免費開源（OFL） | 免費開源（OFL） | Windows 系統字型 | 免費開源（OFL） |
| Web Font 託管 | Google Fonts | Google Fonts | 不可嵌入 | Google Fonts |
| 可變字型 | 是（100-900） | 是 | 否 | 否 |
| 跨平台一致性 | 高 | 高 | 低（僅 Windows） | 高 |
| 最適場景 | 通用網站、企業站 | 文學、教育類網站 | Windows 系統介面 | 溫暖人文風格標題 |
如果你的需求是「一套字型打天下」，Noto Sans TC 仍然是最均衡的選擇。可讀性、設計品質、授權彈性和 Google Fonts 原生託管這幾個面向都表現出色。思源宋體（Noto Serif TC）適合文學、古典風格的網站。LXGW WenKai（霞鶩文楷）走手寫風格，適合標題或裝飾用途，長篇正文的可讀性不如 Noto Sans TC。
如果你正在幫網站做全面升級，從主機到字型都想一次到位，可以從我們的WordPress 虛擬主機推薦開始。優先考慮 Bluehost 或 Kinsta 這類對 WordPress 最佳化的主機方案，再搭配 Noto Sans TC 讓整體體驗更上層樓。
適合誰，不適合誰
適合 Noto Sans TC 的情況：繁體中文為主的網站、需要在所有裝置上呈現一致字型、重視免費商用授權、在乎可讀性和現代感的內容站或企業站。WordPress 站長尤其適合，因為整合方式簡單。
不適合或不需使用的情況：純英文網站（不需要中文字型）、對首次載入速度極度敏感且不願接受任何 FOUT 的場景（可考慮 font-display: optional）、需要強烈品牌個性的網站（中性字型可能不夠有辨識度）。如果你的主機回應本身就慢，字型載入只是其中一環，建議先從主機端優化。
常見問題與排解
設定過程中難免遇到問題。以下整理最常見的狀況和解決方法。
字型載入後顯示不正確：檢查 CSS 中 font-family 名稱拼寫是否完全一致（'Noto Sans TC'，含空格和引號）。用瀏覽器開發者工具（F12）的 Computed 標籤確認實際生效的字型。如果被佈景主題 CSS 覆蓋了，加 !important 可以強制覆蓋。清除瀏覽器和 CDN 快取後再試一次。
有些中文字還是顯示預設字型：通常是子集化的問題。確認嵌入碼使用了正確的參數，或者用 Google Fonts css2 API 讓它自動偵測。另一個可能是字型下載失敗（網路問題或被防火牆擋住），用開發者工具的 Network 標籤篩選 Font 類型請求，確認 HTTP 狀態碼是 200。
載入速度太慢：只保留 Regular 和 Bold、加入 preconnect、考慮 font-display: optional。用網站速度測試工具跑一次完整分析，重點關注「Eliminate render-blocking resources」和「Ensure text remains visible during webfont load」兩個項目。
下一步：三分鐘完成 Noto Sans TC 設定
如果你決定要用了，跟著這三步做就行：
- 取得嵌入碼：前往 Google Fonts Noto Sans TC 頁面，選擇 Regular (400) 和 Bold (700)，取得 Standard 嵌入碼。預期結果：拿到一段含 preconnect 的 link 標籤。
- 嵌入網站並宣告字型：把 link 標籤加進
<head>，CSS 裡寫font-family: 'Noto Sans TC', sans-serif;。預期結果：儲存後重新整理頁面，字型開始載入。 - 用開發者工具確認：按 F12 開啟開發者工具，選取文字元素，在 Computed 面板的 Rendered Fonts 區塊確認是否顯示「Noto Sans TC」。預期結果：看到 Noto Sans TC 出現在實際渲染字型中。
如果你的網站還在用效能不佳的主機，字型載入只是其中一環。建議從主機端也一起優化，參考我們的 Bluehost 主機評價或 Kinsta 主機教學，再搭配 快取外掛和 WordPress 速度優化技巧，整體表現會有明顯提升。
Noto Sans TC 常見問題 FAQ
Noto Sans TC 是免費的嗎？
是的，採用 SIL Open Font License 1.1 授權。個人網站、商業網站、APP 介面、印刷品都能免費使用，甚至可以自行修改字型再散佈。唯一限制是不能單獨販售字型檔案本身。
Noto Sans TC 支援哪些語言？
Noto Sans TC 專為繁體中文設計（TC = Traditional Chinese），涵蓋台灣和澳門使用的繁體中文幾乎所有常用和罕用字元。需要簡體中文、日文或韓文時，應選擇對應的 Noto Sans SC、Noto Sans JP 或 Noto Sans KR。
如何在 WordPress 中使用 Noto Sans TC？
最簡單的方法是透過「外觀 > 自訂 > 額外 CSS」加入 @import 語法和 font-family 宣告。或者用 Insert Headers and Footers 外掛在 <head> 中加入 Standard link 標籤，效能會更好。詳細步驟參考本文的 WordPress 套用段落。
font-display: swap 是什麼？為什麼重要？
這是一個 CSS 屬性，告訴瀏覽器在 Web Font 下載完成前先用系統字型顯示文字，避免出現空白等待期。Google Fonts 的嵌入碼已自動包含這個參數，不需要額外設定。
Noto Sans TC 會影響網站速度嗎？
會有一定影響，中文字型檔案本來就比英文大。但透過精選字重、使用 preconnect、以及 Google Fonts 的自動子集化和 WOFF2 壓縮，影響可以控制在合理範圍。首次載入後瀏覽器會快取字型檔案，後續訪問幾乎沒有額外負擔。
謝謝你文章. 他解決了我如何有效率地 include NotoSans TC 入網站, 打開網頁的速度快了幾秒. 實在太好了.
Hi Leo,
很高興幫助到你!