生活分享

中英文字型怎麼挑：閱讀、授權與網頁載入

網站字型不能只看展示標題是否漂亮，還要確認繁體中文、英文和數字在正文裡是否好讀，以及字型檔能否用於預定用途。本文以原創讀書筆記網站為例，整理字型搭配、OFL 與訂閱字型的授權差異，並說明系統字型、網頁字型和備援字型的載入檢查。附操作步驟、比較表及原創圖解，協助建立可維護的字型清單與交接紀錄。

更新日期: 閱讀時間約 7 分鐘

Mokaair 原創文章、授權盾牌與主機插圖，代表字型需同時確認閱讀、授權和網頁載入。
圖片：Mokaair (© Mokaair)

挑字型時，一行展示文字常常很吸引人；放進整篇文章後，卻可能出現中文缺字、英文特別細小，或手機剛開啟網頁時文字突然跳動。選擇字型應從實際內容出發，同時處理閱讀、授權與載入。

以下以原創讀書筆記網站示範判斷方式，依 2026 年 9 月 14 日查閱的一手資料整理。情境與檢查清單自行設計，沒有替特定字型做閱讀成效實驗，也沒有將付費服務列成推薦排名。

先用會出現在網站上的文字試排

準備一段真正接近使用情境的樣本文字，包含繁體中文書名、英文作者名、日期、數字和標點。讀書筆記也可能使用人名的少見字，不能只用常見的測試標語。觀察相同段落在候選字型中是否缺字、擠在一起或突然換成另一種外觀。

分別檢查大標題、內文、圖說和表格。裝飾性字型在短標題上可辨識，不代表適合長篇小字；英文看似相同的字級，也可能因字面大小與筆畫粗細而和中文失衡。比較時先保持相同內容與版面，再逐一調整，才能知道改變來自哪裡。

手機上要看實際段落換行，桌面上則檢查較長的閱讀行。不要為了讓首頁看起來緊湊，把所有文字都縮小或壓低行距。以讀者能分辨字形、找到段落重點及完成閱讀為目標，保留後續放大文字時的空間。

搭配先分工，再決定需要幾個字型檔

可先安排一組正文用字，再決定標題是否需要不同風格。若同一家族已有足夠的字重，可能不必額外增加字型。中文、英文與數字的搭配要放進同一段落看，尤其注意基線、標點位置和粗體是否產生明顯落差。

設定字重時，確認實際載入的字型包含需要的樣式；不要只在設計稿中選粗體，卻忽略網站檔案是否提供。整理標題、正文、按鈕及註解各使用哪個家族與字重，讓後續編輯能沿用規則，而非每新增一頁就重新挑選。

系統字型通常不需下載額外字型檔，適合先建立可讀的基本版面，但各作業系統和版本的外觀可能不同。若品牌確實需要指定網頁字型，再評估增加的檔案與維護工作。統一外觀和減少載入量可以取捨，沒有固定要用幾套才算合格。

免費與開源仍然要讀授權條件

Google Fonts 開發者介紹提供採開源授權的字型，可用於商業與非商業專案；選定字型後，仍應查看該家族附帶的實際授權文件。不要把搜尋結果寫著免費，或檔案能成功下載，當成網站、App、印刷與轉交都自動允許。

以 SIL Open Font License 1.1 為例，授權允許使用、修改、嵌入及散布，但不能把字型軟體本身單獨販售。散布時須保留著作權聲明與授權；修改版本還涉及保留字型名稱的限制。若打算自行改檔、轉格式或刪減字集，要一併核對條件。

OFL 要求字型軟體維持該授權，不代表用字型製作的每份文章或圖片也必須採 OFL。這個差異很實用：作品的輸出與字型軟體的轉交是兩件事。把下載頁、家族名稱、版本、授權文件和取得日期一起保存，往後換人維護才有依據。

訂閱字型要確認誰使用、如何交接

Adobe Fonts 的授權說明區分完成的圖片或適當嵌入字型的 PDF，以及仍須編輯文字的文件。客戶若要編輯使用中的字型，需要自己的適當授權；不能因設計師可使用，就把字型檔打包交給所有合作人員。其他字型供應商也應逐一查核。

Adobe Fonts 的網站使用須透過其提供的嵌入程式碼；目前服務不提供將該字型檔自行託管的權利。若要放在自己的主機或上傳建站平台，需另外向字型廠商或授權經銷商取得合適授權，不能直接複製下載請求裡的檔案。

客戶網站還須使用客戶自己的 Creative Cloud 訂閱與網頁專案安排；取消訂閱後，網站會改用設定的備援字型或瀏覽器預設。交接時寫明帳號歸屬、續訂責任和替代方案，別讓網站字型長期依附在離職或結案人員的個人帳號。

先減少不必要載入，再處理字型交換

檢查頁面真正用到的家族與字重，移除未使用的載入設定。支援需求允許時，可評估 WOFF2；中文字型字集較大，採子集能減少檔案內容，但必須保留所需文字並確認授權允許。靜態標題的字集需求，和會持續新增作者姓名的網站並不相同。

網頁字型尚未下載時，瀏覽器需要決定文字如何呈現。font-display: swap 可讓備援字型先顯示，之後換成指定字型；兩者占用空間不同時，換行或按鈕位置可能移動。optional 則可能在字型來得太晚時維持備援，不應把任何選項當成全面無缺點。

自行託管不一定比較快，還涉及主機、快取和檔案處理。可在瀏覽器開發者工具的 Network 面板查看字型請求、大小與耗時，並模擬較慢連線觀察文字何時出現。這些是實際網站應做的檢查，不是本篇已取得的效能成績。

  1. 整理繁體中文、英文、數字和少見字的試排內容。
  2. 確定正文與標題的家族、字重，保存實際授權文件。
  3. 依授權設定載入來源與備援，移除沒有使用的字型。
  4. 檢查慢速或失敗載入、手機換行及文字放大，再記錄交接責任。

把載入失敗也列入驗收

暫時停用網頁字型請求或使用瀏覽器的測試功能，觀察備援字型是否仍能完整顯示內容。重點不是每個裝置完全一樣，而是書名不缺字、導覽不被擠掉、按鈕仍看得見。對字型造成的跳動，回頭調整備援選擇與版面，而非只換更快的主機。

若網站允許留言或持續新增文章，要試放目前樣本沒有的人名和符號，避免子集只照首頁製作。也應檢查複製文字、搜尋與縮放；不要為了固定外觀把整篇內文轉成圖片，讓讀者失去原本的文字操作能力。

最後建立簡短紀錄：使用位置、家族與版本、字重、授權來源、網頁載入方式、備援與維護者。更新主題、字型檔或訂閱安排後，再依這份表檢查。字型選擇的完成點，是讀者能持續閱讀，並且團隊知道如何合法維護。

四張卡片整理試排、授權、載入與交接的檢查重點，包含繁體中文與備援字型。
字型顯示成功只是起點；能閱讀、可使用、可維護才算完整。 · 圖片：Mokaair (© Mokaair)
字型軟體授權、完成作品與網站載入應分別確認。
選擇或用途先確認常見誤解
系統字型各裝置字形與換行所有裝置長得相同
OFL 字型聲明、散布及修改條件免費就沒有條件
訂閱字型輸出圖片、PDF 與可編輯稿可轉交所有字型檔
Adobe 網頁字型嵌入碼與客戶訂閱可直接搬到自己主機
子集與備援缺字、換行及載入失敗檔案越小一定越好

同主題延伸閱讀

  • 生活分享

    Wix 架站指南：編輯網站、選擇方案與網址

    第一次使用 Wix，先釐清網站要完成什麼，再選擇版型與付費方案。本文以原創修鞋工作室介紹站為例，整理 Wix Editor 的頁面編輯、手機檢查、儲存預覽與發布流程，並說明自訂網域、續費、台灣付款工具及平台搬遷限制。附操作步驟、比較表和自繪圖解，協助把網站內容、功能需求與長期管理成本一起考慮，避免只看首頁完成就急著升級。

  • 生活分享

    線框圖與原型怎麼用：先驗證流程再修視覺

    線框圖、視覺稿與互動原型各有用途，重點是目前需要驗證哪一個問題。本文用原創到府植栽照護預約情境，說明如何挑選保真度、補齊流程與例外狀態，準備不暗示答案的操作任務，再將測試觀察轉成修改紀錄。附操作步驟、比較表及原創圖解，協助設計初學者與小型團隊，在投入正式開發前先看懂使用上的困難。

  • 生活分享

    www、子網域與子目錄：網站網址結構怎麼決定

    網站要不要加 www，部落格該放 blog.example.com 還是 example.com/blog/，需要從平台支援與維護方式一起判斷。本文先拆解網址中的主機名稱和路徑，再比較子網域與子目錄的內容分工、DNS 設定、HTTPS 憑證及網址一致性。附上原創決策表與上線檢查步驟，協助台灣小型網站建立容易使用、管理和交接的網址結構。

  • 生活分享

    網站維護要做什麼：備份、更新與故障回報的日常安排

    網站維護不只是更新外掛，也包含確認內容、帳號、備份、寄信與到期服務。本文以小型 WordPress 內容網站為例，把維護工作拆成日常觀察、更新前後檢查、備份還原及故障回報，提供可以分配給站主、編輯與維護者的工作表。你可以依網站更新頻率安排合適節奏，知道什麼情況要立即處理，並保留足以讓下一位協作者接手的紀錄。

引用本文的文章

最新旅遊情報攻略

資料來源

生活分享