線上字型預覽 API 的替代方案,是指任何以瀏覽器為基礎、私密的處理路徑,讓你能在自訂的範例文字與自訂的大小下檢視字體,無需將字型位元組傳送到伺服器、呼叫託管端點,或持有 API 金鑰。這首先改變的是資料的位置:當開發人員呼叫典型的字型預覽 API 時,字型或其渲染輸出會經過供應商的處理流程,或透過公用網際網路從內容傳遞網路提供服務。而本機替代方案則將每個位元組都保留在當前的分頁中,並使用瀏覽器自己的字型引擎來解碼和渲染字形,這是「我想查看這個字型」與「我想發布這個字型」之間最乾淨的區隔。

這個轉變之所以重要,原因有三個具體面向。首先,字型檔案可能包含複雜的表格、許多字形,以及某些供應商會處理或記錄的授權中繼資料;而純瀏覽器的預覽永遠看不到位元組離開本機。其次,基於 API 的預覽通常意味著有請求配額、帳號或付費方案,而私密分頁完全不需要這些。第三,訪客實際看到的會是瀏覽器自身的渲染結果,因此在字型將顯示的位置進行測試,比在不同技術堆疊上由供應商渲染的結果更為真實。字型預覽工具 (Font Previewer) 是圍繞著這三點所打造,而本文接下來將說明如何使用它,以及它的限制在哪裡。

font preview online api alternative
線上字型預覽 API 替代方案:在本機執行

跳過伺服器:真正的本機字型預覽工作流程

大多數公開的字型預覽 API 至少都需要一個整合步驟:註冊、取得金鑰、撰寫請求,然後接收 JSON 或渲染後的圖片。這在正式生產環境的排版上可行,但對於「這個 .woff2 是不是我下載的那個字重,以及它是否涵蓋我標題中的標點符號?」這類日常任務來說太過繁重。本機瀏覽器的方式則去除了整個伺服器往返過程,改用三個控制項——檔案選擇器、文字欄位、像素大小——全部在頁面上執行。沒有合約、沒有速率限制,也沒有對你即將評估的檔案進行遙測。

由於預覽是透過瀏覽器的字型解碼器進行,「我的訪客所使用的瀏覽器會如何渲染這個字型?」這個問題的答案,就從供應商的承諾變成了直接的觀察結果。這也代表你真正在意的怪異之處(缺少的貨幣符號、字體回退的長破折號、在 Windows 上看起來較淡的粗體字重)會在預覽過程中浮現。字型預覽工具刻意將範圍限定在這項單一工作:讀取所選的檔案、解碼它、渲染使用者的範例文字,並由瀏覽器引擎來做最終判斷。

字型預覽 API 能做到、而瀏覽器工具做不到的事

評估這種取捨的一個有效方法是比較兩種方式實際上做了什麼。下表並排比較了典型的託管式字型預覽 API 與本機瀏覽器路徑;這裡沒有任何計算,每一列都摘要了已記錄的行為或明確說明的限制。

能力 典型的字型預覽 API 本機瀏覽器預覽
網路往返 每次預覽或首次載入都需要 無——檔案由瀏覽器在本機讀取
帳號或 API 金鑰 通常需要 無
位元組傳輸位置 傳送至供應商的 CDN 或後端 僅保留在當前分頁內
使用的渲染器 供應商的字型引擎,通常是伺服器端的圖片 瀏覽器自己的字型引擎
作業系統安裝 不需要,但像素可能會在伺服器上快取 不需要——字體僅存在於頁面中
自訂文字輸入 有時支援;許多 API 固定範例文字 任何你貼上的 Unicode 文字
整數像素大小範圍 依供應商而異 8 至 200 px
最大檔案大小 由 API 方案設定 每個所選檔案 10 MiB
字形涵蓋範圍檢查 有時透過字元對映請求進行 直接在畫面上檢視——缺少的字形會顯示為方框
授權驗證 某些供應商會掃描或附加中繼資料 未執行
CSS 或 @font-face 匯出 通常是 API 回應的一部分 不會產生

對這項比較持平的解讀並不是「瀏覽器勝,API 敗」。當你需要機器可讀的中繼資料、產生的 CSS 套件,或保證跨環境渲染時,託管式 API 就能發揮其價值。對於私密的、安裝前的檢查來說,本機路徑設定起來更快,也更不容易被誤用。

如何在沒有 API 的情況下預覽本機字型

以下確切的操作順序對應於此工具記錄的三個動作,並按照工具預期的順序進行。在整個預覽過程中請保持瀏覽器分頁開啟;關閉或重新整理分頁會將暫時的字體從頁面的文件字體集中移除。

  1. 挑選值得信賴的檔案。開啟字型預覽工具,選擇一個不大於 10 MiB 的 TTF、OTF、WOFF 或 WOFF2 檔案。請使用你信任的來源提供的檔案,因為即使位元組從未離開你的機器,字型仍是由瀏覽器程式碼處理的複雜二進位輸入。
  2. 輸入具代表性的預覽文字。輸入或貼上你實際需要檢視的字詞、數字、標點符號、大小寫形狀,以及任何帶有變音符號或非拉丁文字的字元。可接受純 Unicode 可編輯文字;如果所選字體未包含某些字形,缺少的字形會顯示為方框或瀏覽器的回退字元。
  3. 設定整數字型大小。選擇介於 8 至 200 之間的任何整數像素值。此控制項僅變更 CSS 預覽大小;它不會修改字型的單位、hinting、輪廓、kerning 表格或匯出的位元組。
  4. 查看渲染結果。在當前的瀏覽器分頁中檢視範例。確認字形涵蓋範圍、間距與視覺字重。如果字元顯示為方框,該字體很可能缺少那些字形——請嘗試不同的範例文字行或不同的檔案。
  5. 替換作用中的字體。若要切換檔案,請選擇另一個 TTF、OTF、WOFF 或 WOFF2。工具會在載入新檔案之前先從文件字體集中刪除先前的字體,因此先前的預覽不會在背景中以緩慢載入的方式殘留。
  6. 匯出前進行合理性檢查。在你的訪客所使用的瀏覽器中測試候選字型。瀏覽器縮放、裝置像素比、作業系統渲染以及消除鋸齒,都可能會改變同一個字型在別處的顯示效果。

如果在第一步時頁面顯示載入錯誤,該檔案很可能有損壞的位元組、標示錯誤的資料,或是當前瀏覽器無法解碼的內部表格。受支援的副檔名並不保證瀏覽器能夠讀取實際的內容。在這種情況下,請從原本值得信賴的來源重新下載,或選擇另一個檔案。

在正式採用前確認字形涵蓋範圍

本機預覽較為低調的一項優勢,就是能夠一目了然地確認手中的字體是否包含你的文案實際需要的字形。一個有用的技巧是組合一行預覽文字,混合容易處理的情況(拉丁字母、常見數字)以及較困難的情況(花引號、長破折號、貨幣符號、少見的標點、帶變音符號的拉丁字母,以及你打算發布的任何非拉丁文字)。瀏覽器會渲染所有能解碼的內容,並以平台的缺字指示器(通常是空心矩形)標示無法解碼的部分。

此工具本身並不會合成缺少的字形、無法證明完整的語言支援、不會列舉字元對映,也無法透過影像分析區分回退字形與所選字型。這是刻意設計的:頁面內的渲染是瀏覽器將繪製內容的真實訊號,而非正確性的認證。如需在不安裝字型的情況下深入檢視個別字形,請參閱如何在不安裝字型的情況下檢視字形的逐步說明。

在閱讀預覽結果時,有兩個細節值得注意。首先,範例下方的顯示標籤來自所選的檔案名稱,而不是檔案內部的 family 或 style 記錄——一個名為「Demo Bold」的檔案內部可能帶有不同的中繼資料。其次,頁面會為每個載入的字體指派一個唯一的暫存 family 名稱,讓預覽不會與周圍網站已使用的字型發生衝突。瀏覽器會在分頁存活期間保留該字體,並在關閉、重新整理或替換時將其捨棄——這正好是 MDN Document.fonts 參考文件中所描述的暫時性字體範圍。

無 API 預覽的不足之處

私密預覽只是初步的檢視,而非最終定論。它不會計算授權權利、不會檢查嵌入權限、不會子集化字形、無法在 TTF、OTF、WOFF 和 WOFF2 之間轉換、不會產生 @font-face CSS 規則,也不會並排比較多個字型。授權與再散布的決定仍然必須依據字型本身的授權條款,而預覽工具永遠不會開啟它。輸出檔案也不會產生:來源字型不會被修改,也沒有「下載較小版本」的按鈕,因為產生這類檔案代表要寫入工具從未聲稱會寫入的位元組。

瀏覽器縮放和裝置像素比同樣會影響同一個字型在其他地方的顯示。兩台不同的機器、兩套不同的作業系統渲染堆疊,以及兩種不同的消除鋸齒實作,都可能讓同一個檔案呈現出明顯不同的字重。若要在網路上可靠使用,請在目標瀏覽器中測試候選字型,並確認其授權格式與字重。本機預覽提供快速、私密且在頁面內即可進行的檢查——在發布之前,請將其與真正的授權審查以及真正的跨瀏覽器測試搭配使用。

值得信賴的來源與瀏覽器引擎行為

由於字型預覽工具信賴瀏覽器自身的字型引擎,而不聲稱能修復、轉換或重新標示字型,因此預覽的品質等同於來源檔案的品質。開放的字型資料庫、可驗證授權的付費鑄字廠,以及直接從字型設計師自家網站下載的檔案,都是最安全的起點。此工具不會驗證來源出處,也不會掃描惡意表格;只有當瀏覽器嘗試載入時,才會間接檢查檔案的結構完整性。

瀏覽器的解碼行為記錄在兩個值得在預覽時保持開啟的地方。MDN FontFace 頁面說明了如何從 ArrayBuffer 建構字體、等待載入結果,然後將其加入文件字體集。對應的 MDN Document.fonts 參考文件則說明了暫時性字體如何僅存活於頁面中,以及在卸載時將其移除如何保持文件字體集的整潔。閱讀這兩頁會讓這次預覽變成一個關於瀏覽器本身如何處理自訂字體的小型學習——也證明了為何這個工作流程完全不需要 API。