網頁字型怎麼選？中文網站適合字型、CSS 實作設定、載入速度與授權判斷

網頁字型是什麼？跟一般電腦字型有什麼不同？

網頁字型是網站用來控制文字外觀的字型設定，可以是使用者裝置已有的系統字，也可以是網站載入的 Webfont。差別在於：系統字速度快但外觀不一定一致，Webfont 顯示一致但要處理速度、商用授權與後備字型。

網頁字型的基本定義

網頁字型指的是網站透過 CSS 指定給瀏覽器顯示的字型。它不只影響好不好看，也會影響品牌感、閱讀舒適度、載入速度與不同裝置上的顯示穩定性。

對台灣網站來說，網頁字型的重點通常不是追求最特別的字，而是讓繁體中文在手機、桌機、Windows、macOS、Chrome、Safari 都能清楚閱讀。這點比很多人想像中重要。

系統字、Webfont、後備字型的差別

類型	意思	優點	注意事項
系統字	使用者裝置原本就有的字型	速度快、不需下載	不同裝置外觀可能不同
Webfont	網站載入的外部或自架字型	品牌一致、設計控制度高	需處理檔案大小、授權與載入策略
後備字型	主要字型失敗時接手顯示的字型	避免文字變空白或亂跳	順序要合理，避免中英混排不協調

為什麼同一個網站在不同裝置看起來會不一樣

同一個網站在不同裝置看起來不同，通常是因為使用者電腦沒有安裝指定字型，瀏覽器改用 fallback stack 裡的後備字型。Windows 可能顯示微軟正黑體，macOS 可能顯示蘋方，Android 又可能改用 Noto Sans CJK。

真正成熟的字型設定，不會只寫一個漂亮字型名稱，而會安排主字型、替代字型與通用字族，例如 sans-serif。這樣就算 Webfont 沒載入，也能保住基本閱讀體驗。

中文網頁字型為什麼不能只照英文網站選？

中文網頁字型不能直接套用英文網站邏輯，因為中文字集大、檔案重、閱讀密度高，字重與行高一選錯，手機上會立刻變難讀。中文網站選字型，要先看繁中支援、清晰度、載入成本與商用授權。

中文字型檔通常比英文字型大很多

英文字型主要處理拉丁字母、數字與符號，字元量相對有限；中文字型要涵蓋大量漢字、標點與常用符號，完整字型檔通常明顯更大。justfont 的 Webfont 說明也提到，中文完整字型檔若直接提供給網頁瀏覽使用，等待時間與頻寬成本都會成為問題。

所以中文 Webfont 的實務重點是控制載入範圍。能用系統字解決的正文，不一定要硬載整套字型；需要品牌感的標題、首頁主視覺、活動頁，可以再考慮 Webfont 或子集化。

中文網站要優先考慮可讀性，不只是風格

中文字的筆畫密度高，太細、太擠、太花的字型，在手機上很容易變成一團灰。很多英文網站可以用細字重營造高級感，但中文正文如果長期使用過細字重，閱讀負擔會更高。

我通常會先看正文是否舒服，再看標題是否有記憶點。因為使用者真正花時間閱讀的是段落、表格、商品資訊與表單，而不是只看第一屏的大標題。

字重越多，不一定越好

中文網站常見錯誤是一次載入 Regular、Medium、Bold、Black 等多個字重，結果視覺差異不大，速度成本卻增加。若是一般企業官網或部落格，正文一個常規字重，加上標題或重點用一個較粗字重，通常已經足夠。

字重策略應該服務資訊層級，而不是服務設計師的選單完整度。尤其是 Noto Sans TC、Noto Serif TC 這類中文字型，如果沒有明確需求，不建議整站載入過多字重。

手機閱讀會放大字型選錯的問題

手機螢幕寬度小，中文字一行可容納的字數有限。字型太窄會顯得擁擠，字型太鬆又會讓段落破碎，行高不足則會讓多行文字黏在一起。

台灣網站流量很多來自行動裝置，字型決策不能只看桌機設計稿。標題、內文、按鈕、導覽列、商品卡與 FAQ 都要在手機上檢查，尤其要看長詞、英文品牌名與數字混排是否穩定。

台灣中文網站常見、適合使用的網頁字型有哪些？

台灣中文網站常見且安全的網頁字型選項，包括 Noto Sans TC／思源黑體、Noto Serif TC／思源宋體，以及 justfont、Adobe Fonts 等付費或雲端 Webfont。選擇時不要只看好不好看，還要看網站類型、速度、授權與正文可讀性。

免費常用：Noto Sans TC／思源黑體

Noto Sans TC 與思源黑體是中文網站最常見的無襯線選項之一，適合企業官網、部落格、服務頁、知識型內容與一般 WordPress 網站。它的優點是中性、清楚、辨識度高，搭配英文字與數字也不容易出問題。

Google Fonts 官方 FAQ 說明，Google Fonts 多數以開源授權提供，可用於商業網站，但實際仍應以該字型授權頁為準。對多數台灣網站來說，Noto Sans TC 是低風險、高通用性的首選。

免費常用：Noto Serif TC／思源宋體

Noto Serif TC 與思源宋體適合需要一點文化感、編輯感、信任感的網站，例如品牌故事、出版內容、顧問專欄、餐飲品牌、茶酒花藝、藝文活動頁。它比黑體更有氣質，但正文使用時更需要注意字級與行高。

如果整站都是長文，宋體不一定比黑體更好讀。我的做法通常是：標題或引言可用明體、宋體，正文仍保留穩定的黑體或系統字，避免長時間閱讀疲勞。

品牌感選項：蘭陽明體、粉圓體與其他繁中文字型

蘭陽明體、粉圓體、金萱、凝書體等繁中文字型，比 Noto 系列更有性格，適合品牌形象站、活動頁、特色商品頁或首頁標題。這類字型的價值在於建立辨識度，但不一定適合拿來當全站正文。

品牌字型要先分清楚用途：標題字型可以強，正文字型要穩。若餐飲、選物、甜點、旅宿網站想要溫度，可以在 H1、H2、標語或重點數字使用個性字型，正文仍用清楚的黑體。

付費與雲端服務：justfont、Adobe Fonts

justfont 是台灣常見的中文 Webfont 服務，優勢在於繁體中文字型選項與中文子集化思維。其方案頁以 PV、網域、會員類型等條件區分使用方式，適合需要中文品牌字型但不想自己處理字型檔與授權細節的網站。

Adobe Fonts 則適合已在 Creative Cloud 生態內工作的設計團隊。Adobe 官方說明可透過其提供的 embed code 使用網站字型，也明確區分自架字型與雲端服務的授權限制。只要涉及客戶網站，授權歸屬與方案延續性一定要在交付前確認。

不建議整站使用的字型類型

字型類型	不建議整站使用的原因	可接受用法
手寫字	長文辨識度低，手機閱讀吃力	標語、短標題、活動視覺
書法字	筆畫變化大，不適合小字級	品牌主視覺、節慶頁
過細字重	Windows 與低解析度螢幕可能不清楚	大尺寸標題，且需實機檢查
冷門非完整中文字型	可能缺字，fallback 後風格斷裂	少量裝飾文字

不同網站類型要怎麼選網頁字型？

不同網站類型的網頁字型選擇，應該由閱讀任務決定。企業官網要穩定專業，電商要資訊清楚，部落格要長文好讀，品牌形象站與作品集可以在標題使用更有個性的中文字型。

企業官網：穩定、專業、清楚優先

企業官網最適合使用 Noto Sans TC、系統黑體或穩定的商用黑體。因為企業官網的主要任務是讓使用者快速理解服務、案例、流程、聯絡方式與可信度。

如果字型太有個性，反而會干擾資訊判斷。B2B、顧問、工程、醫療、法律、教育、SaaS 類網站，字型要把穩定感放在第一位。

品牌形象站：可用較有個性的標題字型

品牌形象站可以在標題、主視覺、品牌標語使用蘭陽明體、金萱、粉圓體或其他繁體中文字型，讓第一眼更有辨識度。但正文、導覽列與表單仍建議使用可讀性高的字型。

很多品牌網站的問題不是字型不夠特別，而是每個區塊都想特別，結果沒有主次。標題有個性，正文安靜，整體反而更像成熟品牌。

電商網站：商品資訊與按鈕可讀性優先

電商網站的字型要服務購買決策。商品名稱、價格、規格、庫存、折扣、按鈕、配送資訊都要清楚，不能因為追求風格而讓使用者看不懂。

建議使用清楚的黑體作為主字型，價格與 CTA 按鈕可用較粗字重。若要使用品牌字型，放在首頁標語或分類頁標題即可，不要讓商品規格跟著變花。

部落格／內容站：長文閱讀舒適度優先

部落格、知識站、媒體型網站，最重要的是正文閱讀。正文字級、行高、段落寬度與字重，比字型本身更能決定使用者是否願意讀下去。

建議使用 Noto Sans TC、系統字或穩定的明黑搭配。若文章篇幅長，可以參考網站規劃與SEO 內容撰寫的資訊層級安排，讓標題、表格、列表與段落更容易掃讀。

作品集／設計網站：風格可以強，但正文不能犧牲閱讀

作品集與設計網站可以比一般企業網站更有風格，因為視覺本身就是作品的一部分。不過作品說明、角色、成果、流程、聯絡資訊仍要好讀。

如果整站使用個性很強的中文字型，建議至少保留一組穩定後備字型給長段落。視覺感可以吸引人，清楚的內容才會讓人真的理解你的能力。

網站類型	建議主字型	標題可用	避免
企業官網	Noto Sans TC、系統黑體	中等粗度黑體	過度裝飾字
品牌形象站	穩定黑體	蘭陽明體、金萱、粉圓體	正文全用手寫字
電商網站	清楚黑體	粗體價格、活動標題	商品資訊字級太小
部落格	Noto Sans TC、系統字	明體或較粗黑體	行高太窄
作品集	視覺字型加穩定正文	個性字型	每個區塊都換字型

網頁字型怎麼設定？CSS、Google Fonts、WordPress 基本做法

改變網頁字型的基本做法，是用 CSS 的 font-family 指定字型，若字型不是系統內建，就要透過 Google Fonts、@font-face、自架 WOFF2 或 WordPress 後台載入。完整設定包含字型名稱、載入來源與後備字型。

用 font-family 指定網頁字型

font-family 是網頁字型設定的核心。瀏覽器會從左到右尋找可用字型，找不到第一個就使用下一個。

基本 CSS 範例

適合一般網站先建立穩定的繁中 fallback stack。

body {
  font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  font-weight: 400;
  line-height: 1.7;
}

使用 Google Fonts 載入中文字型

使用 Google Fonts 時，要先載入字型 CSS，再在自己的 CSS 裡指定字型名稱。中文網站不建議一次勾選太多字重，常見做法是先載入 400 與 700，真的需要再增加。

<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">
body {
font-family: “Noto Sans TC”, “PingFang TC”, “Microsoft JhengHei”, sans-serif;
}

用 @font-face 自行載入字型

@font-face 適合有合法 Webfont 授權、想 self-host 字型檔的網站。它讓你替字型命名，並指定瀏覽器要從哪裡下載字型檔。

self-host WOFF2 範例

適合已取得網站嵌入授權，且字型檔放在自己主機的情境。

@font-face {
  font-family: "BrandTC";
  src: url("/fonts/brandtc-regular.woff2") format("woff2"),
       url("/fonts/brandtc-regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
body {
font-family: “BrandTC”, “Noto Sans TC”, sans-serif;
}

font-family 與 src 的真正作用

font-family 是你在 CSS 裡呼叫字型時使用的名稱，src 是字型檔案來源。很多字型沒載入的問題，都是把這兩件事混在一起，或是檔案路徑寫錯。

MDN 的 @font-face 文件也將 font-family、src、font-weight、font-display 等描述符分開說明。實作時要把每個字重各自定義清楚。

使用 local() 先找本機字型，再下載 Webfont

local() 可以讓瀏覽器先檢查使用者裝置是否已有該字型，找不到才下載網站提供的字型檔。這種做法適合常見字型，但字型名稱要準確，且不能假設每台裝置都有。

@font-face {
  font-family: "Noto Sans TC Local";
  src: local("Noto Sans TC"),
       url("/fonts/noto-sans-tc.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

WordPress 網站常見設定方式

WordPress 網站通常有三種做法：主題內建字型設定、頁面編輯器的全站樣式、或自訂 CSS。若使用外掛載入 Google Fonts，要檢查是否重複載入同一套字型，否則會讓網站速度變差。

比較穩的做法是先在WordPress 架站階段決定主字型，再搭配網站設計規範固定字級、行高與標題層級。後續如果要優化速度，再回到網站速度優化檢查字型載入。

系統字 fallback stack 範例

適合不想載入外部中文字型、重視速度的 WordPress 與企業網站。

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", "PingFang TC", "Microsoft JhengHei",
    "Noto Sans TC", sans-serif;
}

中文 Webfont 會不會拖慢網站？速度與 Core Web Vitals 怎麼顧？

中文 Webfont 可能拖慢網站，尤其是載入完整中文字型、多個字重或未設定 font-display 時。要兼顧 Core Web Vitals，優先使用 WOFF2、減少字重、設定 font-display、必要時 preload 或 preconnect，並避免字型交換造成 CLS。

優先使用 WOFF2，必要時保留 WOFF

現代網站優先使用 WOFF2，因為它是常見的網頁字型壓縮格式，通常比 TTF、OTF 更適合網頁載入。WOFF 可作為備援格式，但 TTF、OTF 不建議直接當主要網頁載入格式。

如果你拿到的是桌面用 TTF 或 OTF 字型檔，第一步不是直接上傳到網站，而是確認授權是否允許網站嵌入，再確認是否有 Webfont 格式可用。

用 font-display: swap 降低空白文字風險

font-display 會影響字型尚未下載完成時，文字要不要先用後備字型顯示。MDN 說明 swap 會給字型很短的阻塞期間，接著使用後備字型顯示，等字型完成後再交換。

對中文網站來說，font-display: swap 通常是務實選項，因為使用者不應該為了等字型而看到空白文字。品牌字型很重要，但文字先出現更重要。

用 preload / preconnect 減少等待時間

如果首屏標題或正文必須使用 Webfont，可以考慮 preload 關鍵字型檔；如果使用 Google Fonts，則可加上 preconnect 讓瀏覽器更早建立連線。不過 preload 不能濫用，只適合真的會在首屏使用的字型。

<link rel="preload"
  href="/fonts/brandtc-regular.woff2"
  as="font"
  type="font/woff2"
  crossorigin>

減少不必要字重與字型數量

字型效能最常見的問題，不是用了 Webfont，而是一次用了太多套、太多字重。中文網站若同時載入黑體、明體、手寫字，再各自載入多個 font-weight，速度壓力會快速增加。

建議先控制在 1 到 2 種主字型，字重以 400、500 或 700 為主。若沒有清楚資訊層級需求，不要為了設計稿看起來完整而載入所有字重。

子集化與 unicode-range 適合什麼情境

字型子集化是把只會用到的字元切出來，降低下載體積。unicode-range 則能指定某個字型檔適用的 Unicode 範圍，讓瀏覽器在需要那些字元時才使用對應字型。

這適合標題固定、活動頁、少量品牌字、或多語系字型拆分。不過對內容經常更新的部落格與電商，手動子集化維護成本高，通常要搭配自動化工具或雲端 Webfont 服務。

避免字型交換造成 CLS

CLS 是版面配置位移指標，字型交換也可能造成 CLS。當後備字型與 Webfont 的字寬、字高差太多，文字一換字型，按鈕、標題、段落高度就可能跳動。

降低風險的做法包括：選擇尺寸接近的後備字型、避免首屏用過於特殊的中文字型、不要讓標題容器高度完全依賴字型載入結果。字型漂亮但畫面會跳，對使用者體驗並不划算。

免費字型、付費字型、雲端 Webfont 授權怎麼判斷？

判斷網頁字型授權時，要確認能不能商用、能不能網站嵌入、能不能 self-host、是否限制網域、PV、客戶交付或 App 使用。可下載字型不等於可放進網站，商用授權也不一定包含 Webfont 授權。

免費字型不一定等於所有用途都免費

Google Fonts 官方 FAQ 說明其字型可商用，並可用於網站、App、印刷等用途，但每個字型仍有自己的開源授權條件。其他免費中文字型則不一定相同，有些只允許個人使用，有些禁止再散布或嵌入。

看到「免費下載」時，還要確認是否允許商用、網站嵌入、修改、轉檔、客戶專案交付。字型是軟體授權，不是下載了就自動擁有所有權利。

商用網站要看「網站嵌入」權利

商用授權與網站嵌入授權要分開看。桌面授權可能允許設計師在 Photoshop、Illustrator、簡報或圖片中使用字型，但不一定允許把字型檔放到網站伺服器上讓訪客下載。

justfont 的通用授權說明就明確提醒，若需使用 Web Font，必須使用其 Web Font 服務，不應直接把字型檔放在網頁上。這是很多台灣網站最容易踩到的地方。

雲端 Webfont 通常和流量、網域、方案有關

雲端 Webfont 服務通常不是單純賣字型檔，而是提供網站載入服務、字型管理、子集化、網域設定與流量計算。justfont 方案頁以 PV、網址、HTTP/HTTPS、個人或企業網站等條件區分；Adobe Fonts 則要求透過其提供的 embed code 使用網站字型。

購買前要看清楚：可用幾個網域、是否支援客戶網站、是否可自架、流量超過怎麼算、方案到期後網站是否仍可正常顯示。

交給設計公司或架站公司時要確認授權歸屬

若網站由外部設計公司或架站公司製作，必須確認字型授權歸誰、方案由誰續約、網站移交後能不能繼續使用。最糟的情況是網站上線時看起來正常，半年後字型服務停用，整站變回預設字。

檢查項目	要確認的問題
商用	企業網站、電商、客戶專案是否可用
網站嵌入	是否允許用 Webfont 方式載入
self-host	是否允許把字型檔放在自己主機
網域與流量	是否限制網域數、PV 或方案期間
交付	客戶網站移交後授權是否仍有效

網頁字型的可讀性設定：字級、行高、字重、中英混排

好看的網頁字型如果沒有搭配正確字級、行高、字重與中英混排，仍然會不好讀。中文網站正文建議使用清楚字型、足夠行高、避免過細字重，並在手機版重新檢查文字密度。

正文字級與行高建議

位置	常見建議	判斷重點
正文	約 16px 到 18px	長文是否能連續閱讀
行高	約 1.6 到 1.8	多行中文不要黏在一起
註解、小字	不宜過小	手機上是否仍能辨識
按鈕文字	清楚、略粗	操作意圖是否明確

中文網站不建議字重太細

中文筆畫多，過細字重在手機、Windows 或亮色背景上容易失去辨識度。許多設計稿在高解析螢幕看起來很漂亮，但使用者實際用一般筆電或手機看時，可能只覺得吃力。

正文通常建議使用 400 或 500 左右的字重，標題可使用 600 或 700。若使用明體或宋體，還要更小心小字級的筆畫細節。

標題字型可以有個性，正文要穩定

標題字型負責建立情緒與品牌感，正文負責讓人讀完。兩者任務不同，不應用同一套標準判斷。

實務上，標題可以使用較有記憶點的中文字型，正文則使用 Noto Sans TC、系統黑體或易讀的商用字型。這種搭配通常比整站都用品牌字更耐看。

中英文混排要注意字高與 fallback

台灣網站常有中文、英文品牌名、價格、規格、百分比、單位混排。若中文字型與英文字型字高差太多，段落會顯得忽高忽低，表格和按鈕也會不整齊。

設定 fallback stack 時，要同時看中文與英文。若品牌英文需要特定字型，可以只在標題或 logo 以外的局部使用，不必讓全站正文都跟著載入。

手機版要重新檢查閱讀密度

手機版不能只把桌機版縮小。段落寬度、字級、行高、按鈕高度、列表間距都要重新檢查，尤其是 FAQ、價格表、服務流程與文章內表格。

我會特別檢查三個位置：第一屏標題是否斷得自然、正文是否一行太短、按鈕文字是否擠在一起。這些問題比字型名稱本身更影響使用者感受。

網頁字型常見問題排查：沒載入、變預設字、字重無效

網頁字型出錯時，常見原因是檔案路徑錯誤、CORS 或授權限制、字型本身沒有中文字、font-weight 不存在、CSS 被覆蓋、快取未更新。排查時先看 DevTools 的 Network 與 Computed font-family。

字型完全沒載入

字型完全沒載入時，先打開瀏覽器 DevTools 的 Network，篩選 Font 或 CSS，確認字型檔是否有 404、403、CORS 或 MIME type 錯誤。若是 self-host，最常見就是路徑寫錯或伺服器沒有正確提供 WOFF2。

中文字變成系統預設字

如果英文字有變，中文字沒變，通常代表該字型沒有中文字，或只載入了英文字集。很多英文字型看起來很有設計感，但對繁中網站沒有正文價值。

這時要確認字型是否支援 Traditional Chinese，或改用 Noto Sans TC、Noto Serif TC、思源黑體、思源宋體等支援繁中的字型。

font-weight 設了但看起來沒變

font-weight 無效，常見原因是沒有載入該字重。CSS 寫 700，不代表瀏覽器手上真的有 Bold 字型檔；如果只載入 400，瀏覽器可能用模擬粗體，效果不穩定。

解法是確認 Google Fonts 或 @font-face 是否有載入對應字重，並且每個字重都正確標示 font-weight。

Chrome、Safari、Windows、macOS 顯示不同

不同瀏覽器與作業系統的字型渲染方式不同，Chrome 預設字型也會依系統、語言與使用者設定改變，不應把 Chrome 預設字型當成固定答案。

若品牌一致性很重要，要使用 Webfont；若速度優先，則要接受系統字在不同平台略有差異。這是設計控制與網站速度之間的取捨。

載入速度突然變慢

載入速度突然變慢時，檢查是否新增了字型服務、頁面編輯器外掛、更多字重、第三方追蹤碼或快取失效。字型只是其中一環，但中文字型很容易成為明顯負擔。

問題	可能原因	檢查方式
字型沒載入	路徑錯、CORS、檔案不存在	DevTools Network 看 Font 請求
中文沒變	字型不支援中文字	確認字型語言支援與 fallback
字重無效	沒有載入對應 font-weight	檢查 Google Fonts 或 @font-face 設定
不同裝置不同	系統字與渲染差異	實機測試 Windows、macOS、手機
速度變慢	字型太多、字重太多、快取失效	檢查 LCP、CLS 與字型請求數

哪些內容不應該放進本文？

網頁字型的核心任務是協助網站選字、套用字型、維持速度、確認授權與改善閱讀體驗。與網站使用無直接關係的字型設計史、Logo 教學、圖片規劃或完整效能稽核，應該留給其他專題處理。

不寫字型設計史

字型歷史可以增加背景，但不會直接幫助網站業主選字型或改善載入體驗。

不寫 Logo 字型設計教學

Logo 標準字設計牽涉商標、品牌識別與設計流程，和一般網頁字型使用不同。

不寫完整前端效能稽核

這裡只處理字型與速度相關的 LCP、CLS、FOIT、FOUT，不延伸成完整 Core Web Vitals 稽核。

不寫所有作業系統內建字型清單

列出所有系統字只會增加決策負擔。實務上只需要穩定的 fallback stack 與跨裝置測試。

不寫圖片或視覺素材規劃

字型選擇與圖片規劃是不同工作。網頁字型應先回到文字可讀性、品牌一致性、速度與授權。

如何改變網頁字型？

可用 CSS font-family 指定字型。若要載入外部字型，則可使用 Google Fonts、@font-face、雲端 Webfont 服務或 WordPress 後台設定。設定時要同時安排後備字型，避免主要字型失敗時文字顯示異常。

網頁字體有哪些？

常見可分為系統字、Webfont、Google Fonts 字型、付費雲端字型與自行上傳的字型檔。中文網站還要特別確認繁體中文支援、字重、載入速度與網站嵌入授權。

台灣一般用什麼字體？

台灣網站常見會使用 Noto Sans TC／思源黑體、系統黑體、Noto Serif TC／思源宋體，以及部分品牌型繁體中文字型。一般企業官網與內容站多半適合先從清楚穩定的黑體開始。

Chrome 預設字型是什麼？

Chrome 會依作業系統、語言與使用者設定而不同，沒有適用所有人的固定答案。網站實務上不應只依賴 Chrome 預設字型，應設定清楚的 fallback stack。

中文網頁適合用 Google Fonts 嗎？

適合，但要注意字重數量、載入速度與使用的中文字集。Noto Sans TC、Noto Serif TC 是常見選項，不建議一次載入太多字重，也要加上合理的後備字型。

網頁字型會影響 SEO 嗎？

字型本身不是排名捷徑，但會影響網站速度、CLS、閱讀體驗與使用者互動。若 Webfont 造成首屏文字變慢、版面跳動或手機閱讀困難，就會間接影響頁面品質表現。

免費中文字型可以商用嗎？

要看授權條款。Google Fonts 多數可商用，但仍應確認該字型的授權頁與實際使用範圍。其他免費中文字型可能限制商用、網站嵌入、轉檔或再散布。

@font-face 是什麼？

@font-face 是 CSS 載入自訂字型的方式。它用 font-family 命名字型，再用 src 指向字型檔案來源，並可設定 font-weight、font-style 與 font-display。

為什麼設定了字型，中文字還是沒變？

常見原因是該字型沒有中文字、只載入英文字集、字型檔沒載入、CSS 被覆蓋，或 fallback 順序不正確。可以用 DevTools 檢查實際套用的 font-family 與字型請求。

WOFF2、WOFF、TTF、OTF 哪個適合網頁？

現代網站優先使用 WOFF2，必要時補 WOFF。TTF、OTF 多用於原始字型檔或特定情境，不建議當主要網頁載入格式。使用前也要確認授權是否允許網站嵌入。

一個網站可以用幾種字型？

建議 1 到 2 種主字型即可。若標題與正文分開，仍要控制字重數量，避免拖慢載入。中文網站通常不需要同時載入太多套 Webfont。

字型越細越有質感嗎？

不一定。中文網站字重太細，在手機、Windows 或低解析度螢幕上可能降低可讀性。質感不只來自細字重，也來自合適的字級、行高、留白與資訊層級。