檢視字型而不安裝它，意味著將一個本地的 TTF、OTF、WOFF 或 WOFF2 檔案(大小可達 10 MiB)載入到目前的瀏覽器分頁中，由字型預覽工具將它套用到你選擇的文字上，字級範圍從 8 到 200 像素。該檔案透過瀏覽器的 FontFace API 讀取，並根據你輸入的範例文字進行渲染，在你關閉或重新整理頁面時立即被丟棄。不會有任何檔案被複製到系統的字型資料夾中，不會變更任何應用程式偏好設定，也不會有任何位元組被上傳到伺服器。因為該檔案完全在目前文件的字型集內處理，預覽既是私密的，也是用完即丟的。你可以在不承諾安裝任何東西的情況下，測試一個剛下載的 TTF、一個不熟悉的 OTF，或來自較不可信任來源的候選 WOFF2 檔案。關閉分頁會讓字型消失;選擇新檔案會取代 document.fonts 內先前的字體，讓你永遠不會看到舊的範例與新的範例混雜在一起。結果是一個低風險的初次檢視，快到可以在分門別類時使用，私密到可以在敏感的專案上使用，而且範圍夠窄，不會讓人誤以為它超越單純的視覺檢查。
為什麼人們會搜尋檢視字型的方法
大多數「如何檢視字型」的搜尋來自以下三種情況之一。設計師剛從客戶或字型廠商手中拿到一個字型檔案，想在核准之前先看看這個設計實際渲染出來的樣子。網頁開發人員需要確認下載的 WOFF2 檔案在他們目標使用的瀏覽器引擎中能正確解碼，特別是在從 CDN 切換到自己託管的副本之後。一般使用者只是單純想在不安裝到全系統的情況下知道檔案長什麼樣，通常是因為他們正在試用一個字型包，或是檢查來自較不可信任來源的下載檔案。
在這三種情況下，根本的需求是相同的:對字型實際位元組進行快速、私密、低風險的初次檢視。安裝字型會觸及作業系統。它會將檔案放入字型目錄、向系統服務註冊該字型家族，並出現在每個讀取系統字型清單的應用程式中。當你決定保留該字型時，這沒什麼問題，但當你還在考慮時，這就太超過了。基於瀏覽器的檢視工具使用瀏覽器自己的 FontFace API 讀取檔案，將它套用於目前頁面內的文字，絕不會超出該文件的字型集。不會安裝任何東西，不會上傳任何東西，關閉分頁就會讓字型消失。
基於瀏覽器的字型檢視工具有什麼功能
字型預覽工具圍繞著一個單一原則建構:信任瀏覽器的字型引擎，而不是重新實作它。當你選擇一個檔案時，該工具會驗證它是一個大小不超過 10 MiB 的非空 TTF、OTF、WOFF 或 WOFF2 檔案，將其位元組作為 ArrayBuffer 在本機讀取，建構一個 FontFace 物件，然後等待瀏覽器解碼。如果解碼成功，新的字體會被加入 document.fonts;如果解碼失敗，你會看到明顯的載入錯誤。設定 10 MiB 上限是因為字型表格可能很大且很複雜，而限制記憶體用量可以讓預覽即使在普通的硬體上也能保持順暢。
每次載入都會建立一個唯一的暫存字型家族名稱，讓預覽永遠不會與頁面已使用的字型發生衝突。當你選擇第二個檔案時，前一個字體會在載入取代字體之前先從文件集中刪除，這表示你永遠不會看到舊範例的幽靈與新範例混雜在一起。介面也防範過時的非同步載入:如果你快速點擊多個檔案，較舊且較慢的解碼結果不會取代已經完成載入的較新選擇。
在這整個過程中，來源檔案始終留在你的電腦上。那些位元組是透過瀏覽器自己的 FontFace API 讀取的，並未被傳輸到任何伺服器。你可以透過在預覽字型時打開瀏覽器開發者工具的網路面板來確認這一點:唯一發出的請求是針對頁面本身，而不是你所選擇的檔案。
如何在瀏覽器中檢視字型檔案
這是從「我有一個字型檔案」到「我正在眼前看著它」的最短路徑。每一步都假設你已經在磁碟上擁有該檔案。
- 選擇一個大小不超過 10 MiB 的可信 TTF、OTF、WOFF 或 WOFF2 檔案。使用檔案選擇器來挑選單一字型。只接受這四種副檔名;其他格式、壓縮檔或文件將不會被載入。
- 輸入具代表性的預覽文字，並選擇 8 到 200 像素之間的整數字型大小。輸入你真正關心的文字、數字和標點符號。大小控制只接受整數像素值，並會變更 CSS 預覽大小;它並不會修改字型本身。
- 在目前瀏覽器中檢查字形覆蓋率和外觀，然後在需要時選擇另一個檔案來取代暫存字體。捲動瀏覽你的範例，注意是否有方框或後備字形出現，這代表缺少某些字形;當你想檢查其他東西時，就載入不同的檔案。
如果頁面從未顯示預覽，最常見的原因是檔案損壞或不支援，而不是工具本身的問題。
從瀏覽器預覽中你能學到什麼
瀏覽器預覽是一種視覺測試，而不是認證。它能回答關於外觀的問題，但刻意不回答關於授權、嵌入權限、無障礙性或列印行為的問題。下表總結了預覽能告訴你什麼、不能告訴你什麼，讓你知道何時該停止信任它並轉向更完整的工作流程。
| 問題 | 瀏覽器預覽能回答嗎? | 原因 |
|---|---|---|
| 該檔案在我的瀏覽器中能解碼嗎? | 能 | 瀏覽器的字型引擎要嘛載入它，要嘛顯示解碼錯誤。 |
| 該字型是否包含我打算使用的字元所對應的字形? | 部分 | 當字形缺失時，會出現方框或後備字形。 |
| 在內文或顯示大小下，設計感受如何? | 定性層面 | 你可以在 8 到 200 px 之間以整數像素的級距控制大小。 |
| 該字型是否擁有符合我使用情境的授權? | 不能 | 該工具只讀取位元組;授權必須來自字型本身的授權條款。 |
| 該字型的列印輸出是否與螢幕預覽完全一致? | 不能 | 作業系統的渲染、抗鋸齒和裝置像素比都會影響輸出。 |
| 該字型在不同瀏覽器中看起來會完全相同嗎? | 無法保證 | 不同的引擎可能會對相同的位元組產生略有不同的渲染結果。 |
將預覽用於決策中的視覺面:形狀、間距、大致的節奏、大寫與小寫形式、數字、標點符號，以及基本的字形覆蓋率。將結果視為一次私密的初次檢視，而不是跨平台一致性的保證。
在瀏覽器中檢視字型時的常見問題
這個階段的大多數問題來自檔案本身，而不是工具。辨識常見的訊號可以節省時間。
- 預覽從未出現。該檔案可能已損壞、標籤錯誤，或包含目前瀏覽器無法解碼的內部表格。支援的副檔名是必要但不充分的條件:一個名為 .woff2 的檔案仍然可能包含引擎會拒絕的位元組。
- 範例中出現方框、問號或瀏覽器的後備字形。所選的字型不含這些字形。請切換到你已知該字型支援的字元，或選擇另一個檔案。
- 載入時間比預期更長。字型檔案可能包含大型的 hinting、kerning 和 OpenType 表格。介面會顯示載入狀態，因此較舊且較慢的載入不會悄悄取代較新的選擇。
- 大小欄位拒絕我輸入的值。只接受 8 到 200 之間的整數像素值。該控制項設有範圍限制，以維持預覽的可讀性。
- 檔名看起來具有誤導性。所顯示的標籤取自檔名，而不是字型內部的字型家族或樣式紀錄。一個名為 Demo-Bold.ttf 的檔案，內部的字型家族名稱可能完全不同，而這個工具並不會聲稱兩者一致。
若要對底層瀏覽器 API 進行更深入的診斷，MDN 的 FontFace 參考資料和MDN 的 Document fonts 參考資料說明了瀏覽器如何處理與儲存已載入的字體。
何時瀏覽器預覽並不足夠
瀏覽器預覽適合用於檢視的那一刻，而不是決策的終點。如果你需要跨瀏覽器的等效性，請在你實際目標使用的特定瀏覽器引擎中測試該檔案。如果列印輸出很重要，請透過你列印工作流程所使用的相同路徑來渲染字型。如果無障礙性在考量範圍內，請在實際的文件情境(而非預覽)中評估可讀性、對比和閱讀舒適度。
這個工具的界線也止於檔案本身。它不會為你產生 @font-face CSS、不會對字形進行子集化、不會在格式之間轉換、不會測量列印輸出，也不會並排比較多個字型。那些是各自獨立的工作，大多數都值得使用獨立的工具來處理。預覽的工作範圍更窄、更小:載入一個檔案，讓你看看它在實際瀏覽器中的樣子，並且不擋你的路。
對於安裝或整合到網頁之前的視覺初次檢視——檢查範例文字、數字、標點符號、大寫與小寫字形、大致間距和基本的瀏覽器相容性——字型預覽工具是在目前分頁中取得私密答案的最簡單方式。它完全在你磁碟上已有的位元組上運行，不會動到你的系統字型資料夾，並在你關閉或重新整理頁面的那一刻立即消失。