字體預覽工具

用這台裝置上已安裝的任意字體預覽你自己的文字，或上傳字體檔案，然後複製 CSS。

字體來源

目前字體

列出這台裝置上安裝的全部字體。僅 Chromium 系瀏覽器支援，瀏覽器會詢問一次授權。

已上傳字體

尚未上傳任何字體。

支援 TTF、OTF、WOFF、WOFF2，單檔不超過 20 MB。上傳的字體只在目前頁面內註冊，不會傳送到任何地方，重新整理即失效。

文字與排版

字級 44 px

字重

字距 0 px

行高 1.35

樣式

大小寫

文字顏色

#0f172a

背景顏色

#ffffff

對齊

預覽

字體system-ui來源通用字族

字體是設計的聲音，讓每個字元都恰到好處 0123456789

字元集

CSS 程式碼

font-family: system-ui;
font-size: 44px;
font-weight: 400;
font-style: normal;
letter-spacing: 0px;
line-height: 1.35;
text-align: left;
text-transform: none;
color: #0f172a;
background-color: #ffffff;

什麼是字體預覽工具？

網路上多數字體預覽給你的都是同一份「網頁安全字體」短名單——那份名單你早就會背，而且它對你機器上真正裝了哪些字體隻字不提。本頁反過來，從你自己的系統出發。

字體有三個來源。通用字族（system-ui、sans-serif、serif、monospace）在任何瀏覽器裡都能用。「讀取本機字體」會透過瀏覽器的 Local Font Access API 列舉這台裝置上安裝的每一款字體並填入選擇器——它們立刻就能渲染，因為字形本來就在你機器上，不需要下載任何檔案。或者上傳一個字體檔案（TTF、OTF、WOFF、WOFF2），頁面會在本次工作階段內註冊它，這樣你不必安裝就能校樣一款有授權的品牌字體。

選好字體，輸入你自己的文字，再調字級、字重、樣式、字距、行高、顏色與對齊。字元集列會呈現數字和標點在目前設定下的樣子，CSS 程式碼區塊可以直接複製——當目前字體來自上傳檔案時，還會附上一份 @font-face 骨架。

你輸入的文字和上傳的檔案都不會離開瀏覽器。

使用方式

快速上手

在「字體來源」面板裡選一款字體。通用字族到處都能用；點「讀取本機字體」可列出這台裝置上安裝的全部字體。
要用既有的字體檔案預覽，點「上傳字體檔案」選擇 TTF、OTF、WOFF 或 WOFF2。它會在本次工作階段內註冊，並出現在同一個選擇器裡。
輸入要校樣的文字——一句標題、一個按鈕文案、一個產品名。
調整字級、字重、樣式、字距、行高、對齊方式、大小寫和兩種顏色。預覽區套用的 CSS 屬性與你在樣式表裡寫的完全一致。
複製 CSS 程式碼區塊。上傳字體的話還會附一份 @font-face 骨架，其中用原檔名佔位，換成你自己的託管路徑即可。

讓結果更可靠的幾條經驗

列舉出的清單是精確的，但它只描述這台裝置。這裡裝了什麼不代表訪客裝了什麼——正式環境的樣式表裡一定要留回退鏈。
讀取本機字體僅 Chromium 系支援，且要求安全環境（HTTPS 或 localhost）。Safari 和 Firefox 裡按鈕會隱藏並說明原因，上傳功能照常可用。
一款字族若有多個字重或樣式，在選擇器裡只出現一次。用字重控制項和斜體開關在它實際提供的字面之間切換。
上傳的字體只存在於記憶體中，重新整理即遺失，也不會寫入磁碟——這是刻意的，不是可以設定繞開的限制。
體積較大的中日韓字體（10 MB 以上）解析需要一點時間，字體解碼完成後選擇器會立即更新。

使用情境

校樣授權字體或品牌字體上傳檔案，輸入真實標題，用你打算上線的字級來讀。不必安裝，不會給系統留下任何副作用，檔案也永遠不會離開你的瀏覽器。

盤點某台機器上裝了哪些字體點「讀取本機字體」取得精確清單。當設計交付稿假定了一款其實並不存在的字體，或你需要知道客戶機器上有哪幾款候選字體時，這招很實用。

橫向比較候選檔案上傳同一字族的兩三個字重或不同字面，在固定字級下來回切換。因為文字始終不變，你比較的是字形本身，而不是靠記憶去回想。

調字距與行高字距和行高與字體本身密切相關：幾何無襯線字體在小字級下通常需要略鬆一點的字距，而中日韓文字能承受比拉丁文字更大的行高。拖動滑桿，盯著字元集列看。

核對數字與標點等寬數字還是比例數字、1/4/7 的造型、@ # & 長什麼樣，在資料密集的介面裡都是決定性的。字元集列會把它們按目前設定全部攤開，而不是藏在一整段文字裡。

產生可直接貼上的 CSS每個控制項都會餵給 CSS 程式碼區塊。目前字體是上傳字體時，還會一併輸出帶正確 format() 關鍵字的 @font-face 規則，你只差把 URL 換掉。

本機字體與上傳字體分別是怎麼處理的

這裡用到兩個彼此無關的瀏覽器 API，行為差別很大。

列舉已安裝字體用 Local Font Access API：window.queryLocalFonts() 為每個已安裝字面回傳一筆記錄，含字族名、全名、PostScript 名與樣式。頁面依字族名歸併、排序後交給選擇器。渲染不需要下載——字族名直接交給 CSS，字形由作業系統提供，與你在自己樣式表裡寫的完全一致。Chromium 系瀏覽器在一次性的授權之後提供該 API；Safari 和 Firefox 完全沒有實作，所以那裡是直接隱藏入口，而不是留著讓它失敗。

上傳則用 Font Loading API：檔案被讀成 ArrayBuffer，交給 new FontFace(family, buffer)，load() 之後加進 document.fonts。從這一刻起，這款字體與任何其它字族沒有差別，可以按名稱在 CSS 裡引用。

queryLocalFonts() 要求安全環境（HTTPS 或 localhost），授權對話框被關閉時會以 NotAllowedError 拒絕；面板會如實回報這兩種情況，而不是丟出例外。
同一字族可能以多個樣式出現。清單依字族名去重，所以每款字體只出現一次，具體字面由樣式控制項決定。
FontFace 接受 TTF、OTF、WOFF、WOFF2。檔案損毀或格式不支援時 load() 會 reject，頁面會回報錯誤而不會在選擇器裡留下壞項目。
上傳的字體只儲存在記憶體中——不發網路請求、不寫磁碟、不寫 localStorage。所以它無法跨重新整理存活。
通用字族由瀏覽器內部解析，完全不需要 API，這也是為什麼在另外兩條路都走不通的環境裡它依然可用。

範例

列出本機已安裝的字體

const faces = await window.queryLocalFonts();
// [{ family: "Inter", fullName: "Inter Regular", style: "Regular" }, ...]

const families = [...new Set(faces.map((f) => f.family))].sort();

// 選取後直接交給 CSS：字形由作業系統提供，不下載任何檔案
element.style.fontFamily = `"${families[0]}", sans-serif`;

註冊一個上傳的字體檔案

const buffer = await file.arrayBuffer();
const face = new FontFace("Aurora Sans", buffer);
await face.load();        // 檔案損毀或格式不支援時這裡會 reject
document.fonts.add(face);

// 之後與本機字體完全同構
element.style.fontFamily = '"Aurora Sans", sans-serif';

上傳字體對應的 CSS 程式碼區塊

@font-face {
  font-family: "Aurora Sans";
  src: url("./AuroraSans.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

font-family: "Aurora Sans", sans-serif;
font-size: 44px;
line-height: 1.35;
color: #0f172a;

/* src 裡的路徑是佔位，換成你自己託管的位址 */

常見問題

為什麼我的瀏覽器裡沒有「讀取本機字體」按鈕？

Local Font Access API 只在 Chromium 系瀏覽器（Chrome、Edge、Opera、Brave）實作，而且要求安全來源（HTTPS 或 localhost）。Safari 和 Firefox 裡該按鈕會隱藏，面板會說明原因——上傳字體檔案和通用字族這兩條路都照常可用。

讀取已安裝字體會向伺服器傳送什麼嗎？

不會。瀏覽器會先彈一次授權，你同意之後頁面只拿到字族名和樣式名。不會讀取任何字體資料，不會上傳，這份清單也不會被傳輸到任何地方。

我上傳的字體會被儲存或傳送到哪裡嗎？

都不會。檔案被讀進記憶體、註冊進瀏覽器的字體集合，關閉或重新整理頁面即被丟棄。沒有網路請求，不寫磁碟，也不寫 localStorage。

為什麼重新整理之後上傳的字體就沒了？

因為頁面刻意只把它放在記憶體裡。要持久化就得把字體檔案寫進瀏覽器儲存空間，而一個預覽工具沒有理由留一份你本來就有的檔案的副本。要繼續用，重新上傳即可。

可以上傳哪些格式？

TTF、OTF、WOFF、WOFF2，單檔不超過 20 MB——這是瀏覽器 FontFace 接受的四種容器格式。TrueType 集合（.ttc）把多個字面打包在單一檔案裡，暫不支援，請分別匯出個別字面。

為什麼某些字重看起來不對勁、過粗？

字族裡沒有你要的字重時，瀏覽器會合成：偽粗體是把輪廓加粗描邊，偽斜體是把字形整體傾斜。如果 600 糊掉而 400 和 700 都正常，基本就是這個字族本身沒有 600。

能用它查到訪客裝了哪些字體嗎？

不能，任何網站都不能。列舉必須經過訪客自己機器上的明確授權對話框，所以頁面永遠無法在使用者不知情的情況下清點陌生人的字體。你看到的清單只描述這台裝置，這正是正式樣式表裡要寫回退鏈的原因。

@font-face 的 src 裡該填什麼？

填你自己的建置產物託管該字體檔案的路徑，例如 /fonts/AuroraSans.woff2。頁面已經依據副檔名產生了正確的 format() 關鍵字，你只需要替換 URL。