元伸科技
老實說，字型這件事跟客戶聊的時候，幾乎沒有人會主動提——直到驗收前才發現「中文怎麼長得有點怪？」。中英混排的字型選擇看似只是美感問題，實際上對 AI-Ready 有間接但顯著的影響。本篇整理字型策略對 AI 解析的影響與最佳實作，更全面的字型運用可參考 網頁排版字型設計。
字型對 AI 的兩個影響層面
層面 1：內容解析
AI 不直接看字型，但：
- OCR 識別：圖片中的文字 AI 透過 OCR 讀取，字型清晰度影響準確度
- PDF 解析：白皮書、案例研究 PDF 的字型影響 AI 切片
- 可讀性訊號：Google 評估字型可讀性傳遞到整體品質分
層面 2：效能
字型檔大 → LCP 慢 → Core Web Vitals 分數低 → AI 引用權重降低（詳見 Core Web Vitals 與 AI 引用）
字型管理是 AI-Ready 的隱形要素。
中英網頁字型 5 個最佳實作
實作 1：font-display: swap
@font-face {
font-family: 'Inter';
src: url('/fonts/Inter.woff2') format('woff2');
font-display: swap; /* 關鍵 */
}
swap 讓瀏覽器先用 fallback 字型顯示文字，字型載入完再切換——避免「載入時白屏」。
實作 2：Variable Font
傳統載入：
Inter-Light.woff2 (50KB)
Inter-Regular.woff2 (50KB)
Inter-Medium.woff2 (50KB)
Inter-Bold.woff2 (50KB)
總計：200KB
Variable Font：
Inter-Variable.woff2 (110KB) — 含所有字重
省 50% 流量，且字重變化更平滑。
實作 3：中英分離
:root {
/* 英文優先，中文 fallback */
--font-base: 'Inter', 'Noto Sans TC', system-ui, sans-serif;
}
body {
font-family: var(--font-base);
}
瀏覽器自動：英文字元用 Inter、中文字元用 Noto Sans TC。兩種語言各自最佳化。
實作 4：字級階層 4-6 級
清楚的字級階層讓 AI 透過視覺權重理解內容重要性：
:root {
--text-xs: 0.75rem; /* 12px - 註解 */
--text-sm: 0.875rem; /* 14px - 小字 */
--text-base: 1rem; /* 16px - 內文 */
--text-lg: 1.125rem; /* 18px - 大內文 */
--text-xl: 1.5rem; /* 24px - H4 */
--text-2xl: 2rem; /* 32px - H3 */
--text-3xl: 2.5rem; /* 40px - H2 */
--text-4xl: 3.5rem; /* 56px - H1 */
}
4-6 級階層 是甜蜜點：少於 4 級階層不清、多於 6 級資訊雜亂。
實作 5：避免文字刻在圖上
<!-- ❌ 文字刻圖（AI 完全讀不到）-->
<div class="hero" style="background-image: url('/hero-with-text.jpg')"></div>
<!-- ✅ HTML 文字 + 背景圖（AI 看得到）-->
<div class="hero" style="background-image: url('/hero-bg.jpg')">
<h1>AI-Ready 智慧網站</h1>
<p>24 年深耕 · 3,000+ 企業實績</p>
</div>
這是 AI-Ready 最常被忽略的單項。實際上看過龜山一家機械廠的客戶，首頁主視覺刻了「30 年精密加工經驗」八個字進去——SEO 工具完全看不到、AI 也完全擷取不到，等於把首屏最黃金的位置丟掉。設計師為了視覺把標題刻在圖上，AI 完全失去這份訊息。我會直接跟設計師講：「不管多漂亮，標題都要走 HTML，要美就用 CSS 蓋上去。」元伸科技的 客製化網站設計 在切版階段就會把這類「圖上文字」轉成 HTML 文字。
中文字型推薦清單
Web Font（需載入）
| 字型 | 大小 | 來源 | 適合 |
|---|---|---|---|
| Noto Sans TC（思源黑體） | 中 | Google Fonts、Adobe | 多數網站首選 |
| Noto Serif TC（思源宋體） | 中 | Google Fonts | 文學、新聞 |
| GenSenRounded TC（源真黑體） | 中 | 自由字型 | 親和、休閒 |
| Cwtex 字型系列 | 小 | 自由字型 | 學術、論文 |
系統字型（無需載入，最快）
font-family:
-apple-system, /* iOS / macOS */
'PingFang TC', /* iOS / macOS 中文 */
'Microsoft JhengHei', /* Windows */
'Source Han Sans TC', /* Linux 思源 */
sans-serif;
免費、無需載入、速度最快。中小企業優先用系統字型 + 必要時載入 1 個 Web Font。
跟客戶聊時最常聽到的疑慮是：「系統字型每台電腦不一樣，網站看起來不就不統一？」老實說，看起來「不完全一樣」沒關係——蘋果用戶看 PingFang、Windows 用戶看 Microsoft JhengHei，兩種都很順眼。除非你是奢侈品牌或設計工作室，否則不必為了 5% 的視覺一致性多載 500KB 字型檔。
英文字型推薦
| 字型 | 風格 | 適合 |
|---|---|---|
| Inter | 現代、易讀 | 多數網站 |
| IBM Plex Sans | 專業、平衡 | B2B、企業 |
| Plus Jakarta Sans | 友善、現代 | 新創、SaaS |
| Outfit | 幾何、極簡 | 設計品牌 |
Subset 進階優化
中文 Web Font 預設可能 5-10MB（含所有 CJK 字元），用 subset 只載必要字元：
# 用 fonttools 工具
pyftsubset Noto-Sans-TC.ttf \
--text="網頁設計AI智慧官網..." \
--output-file=Noto-Sans-TC-subset.woff2
只載入網站實際用到的字元，可從 5MB 降到 200KB（省 96%）。
進階：用 Font Squirrel Webfont Generator 線上 subset。
元伸客戶實戰
某 B2B 客戶字型優化前後：
| 指標 | 改善幅度 |
|---|---|
| 字型總大小 | 大幅縮減 |
| LCP | 明顯縮短 |
| 首屏渲染 | 從 FOIT 閃爍改善為流暢無感 |
| Lighthouse Performance | 顯著提升至綠色 |
| AI 引用率（同期） | 明顯提升 |
字型優化帶動 LCP 與整體 PageSpeed 大幅提升。
不要犯的 5 個錯誤
- ❌ 載入 5 種字重：每種都是獨立檔案，總計 1MB+
- ❌ 不用 font-display：字型載入阻塞渲染
- ❌ 中英用同一字型：通常其中一語言看起來不專業
- ❌ 文字刻在圖上：AI 與 SEO 都讀不到
- ❌ 沒做 subset：中文 Web Font 動輒 5MB
結語：字型是看不見的優化項目
字型優化沒有「立刻看到」的視覺改變，但間接影響 AI 引用率、SEO 排名、使用者體驗——這些才是商業成果的根本。講白一點，字型是「業主感覺不到、但客戶與 AI 感覺得到」的細節，這也是為什麼很多便宜模板網站長期效能輸客製化網站。
元伸科技為客戶交付網站時，字型優化是 PageSpeed 達標的核心工程——做到位，後續所有 AI-Ready 投資都事半功倍。需要重塑視覺與字型階層的客戶可看 企業形象網站方案。
📞 03-366-1000 ｜ 🌐 www.ozchamp.com ｜ 免費諮詢，24hr 內回覆
