字型預覽是一種即時、可互動的字體渲染方式,讓你可以輸入或貼上任何範例文字,並以所選的字級大小即時查看渲染結果;而基於瀏覽器的字型預覽工具則把這個概念直接套用到電腦上已有的字型檔案,讓你在全系統安裝該字型,或將其用於專案之前,可以先行判斷字重、間距、字距 (kerning) 與字形 (glyph) 涵蓋範圍。Font Previewer 正是為這樣的工作流程而設計:你可以指向本機的 TTF、OTF、WOFF 或 WOFF2 檔案,輸入自訂的預覽字串,並挑選 8 到 200 像素之間的任何整數字級大小,整個過程完全不用離開目前的分頁。字體是透過暫時性的瀏覽器 font-face 宣告載入,而非永久安裝,這表示你可以在同一個工作階段中一次試聽整疊候選字型,並保持系統的字型清單完全不被打動。對設計師、開發人員、寫作者,以及任何要為標誌、簡報或網頁挑選字型的人來說,這種預覽方式正是區分「在縮圖中看起來還不錯的字型」與「在實際要使用的字級大小下依然站得住腳的字型」最快速的途徑。

「預覽字型」真正的含義
預覽字型是指在受控環境中渲染其字形輪廓,以便你能根據自己的內容評估其易讀性、風格與字元集。一個真正的預覽能提供螢幕擷圖或縮圖無法給出的四項要素:以你自己的文字作為範例字串、實際打算使用的字級大小、該字型在該字級下的真實螢幕字型微調 (hinting),以及在正式採用前發現缺漏字元的機會。當設計師說某個字型「通過了預覽測試」,他們通常指的是它在真實文案、以多種字級設定排版後依然表現良好,而不只是在字型樣本中令人賞心悅目。
你可以預覽的檔案格式涵蓋了幾乎所有現代字體。TTF (TrueType Font) 與 OTF (OpenType Font) 是你最常從字型廠與免費字型網站下載的格式,而 WOFF 與 WOFF2 則是 CSS @font-face 規則中使用的壓縮網頁格式。一個能接受這四種格式的預覽工具,讓你能以瀏覽器、設計工具或文書處理器最終渲染字型的方式來試聽它。
Font Previewer 與先安裝再說:哪種方式比較好
安裝字型會把它寫入你作業系統的字型目錄,它會一直留在那裡直到你手動移除,同時會塞滿每個應用程式的字型選單,還可能默默地拖慢那些會索引已安裝字型的應用程式。Font Previewer 透過瀏覽器自身的字型處理機制載入檔案,並將它綁定到一個僅存在於目前分頁的暫時字體,從而避開了上述所有問題。當你關閉或重新整理頁面時,預覽就會消失,你的系統則保持乾淨。這讓這個工具非常適合用來篩選一整個資料夾的候選字型、試聽客戶傳來的新字型,或在把 WOFF2 寫入樣式表之前先檢查網頁專用的版本。
本機處理對隱私與可靠性同樣重要。由於檔案從未離開你的電腦,你可以預覽付費字型廠的套件、受 NDA 保護的品牌素材,或內部企業字型庫,完全不必擔心上傳紀錄的問題。其權衡之處在於每個檔案 10 MiB 的上限,這個數字已遠高於幾乎所有實用字型的尺寸,也低於瀏覽器開始抱怨字型資源過大的門檻。
逐步預覽本機字型檔案
- 在目前的瀏覽器分頁中開啟 Font Previewer。
- 點擊檔案選擇器,從電腦中選擇一個 TTF、OTF、WOFF 或 WOFF2 檔案,檔案大小不得超過 10 MiB。
- 將預設的範例字串替換成能代表你實際使用情境的文字,例如標題、一段正文、全字母句 (pangram),或你在意的數字與標點符號。
- 挑選 8 到 200 像素之間的整數字級大小;從你預計的顯示字級開始,再分別往更小與更大的方向調整,看看同一個字體在內文與標題字級下的表現。
- 檢視渲染出來的字形,注意是否有缺漏字元、尷尬的字距配對、字重不一致,以及在背景顏色下的整體易讀性。
- 若要比較另一個候選字型,使用檔案選擇器載入新的字型檔,這會取代暫時字體並立即以同一段預覽文字更新畫面。
挑選能揭露真實問題的預覽文字
任何預覽工具中的預設範例字串能告訴你的畢竟有限。經過妥善挑選的預覽字串,能夠暴露出字型在標誌模擬稿中所隱藏的弱點。納入大小寫字母,以便比較大寫高度 (cap height) 與 x 高度 (x-height);如果字型會出現在價格或資料中,則混入數字與貨幣符號;再加上設計實際會用到的標點符號,因為逗號、引號與 & 符號正是許多字型出包的地方。若是針對內文字型,貼上你打算排版的文章或報告中的一段真實段落;若是針對標題用字型,一段簡短標題搭配一段較長的句子,能讓你感受到不同長度下的字距 (tracking) 表現。
全字母句是常見的捷徑,因為字母表的每個字母都會出現至少一次,而一段長長的全字母句能迅速暴露出間距問題。若是為網頁工作,也別忘了預覽含有 & 符號與問號的字串;若是用於程式碼或資料,則要納入零、字型若有提供的斜線零,以及設計系統要求的任何符號。預覽字串越能反映實際的工作負載,你對這個選擇的信心就越足。
在正確的字級下閱讀預覽結果
在 96 像素看起來優雅的字型,到了 12 像素可能會崩解;在內文字級下讀起來清晰的字面,到了標題尺寸可能顯得軟弱無力。將字級控制項在 8 到 200 像素的範圍內掃過一遍,是最快了解這個字體「適合住在哪裡」的方法。改變字級時請注意三件事:小字級下出現鋸齒狀的筆畫或不一致曲線等螢幕字型微調 (hinting) 瑕疵;某個「Regular」字重在特定字級突然顯得太細或太粗的字重偏移;以及字距,因為在 14 像素段落中看起來寬鬆得宜的間距,到了 120 像素的標題可能會顯得過鬆或過緊。
對於內文候選字型,請停留在 14 到 18 像素,這是多數螢幕閱讀發生的字級。對於 UI 文字,請檢查 11 到 13 像素,這個範圍正是螢幕字型微調品質成敗的關鍵。對於標題用途,則把滑桿推到接近上限,確認字面在海報尺寸下具備你想要的個性與對比。在所有這些字級下維持同一段預覽字串,能讓你對這個字型得到單一而一致的判讀。
在同一個工作階段中比較多個字型
Font Previewer 的替換行為天生就是為了並排比較而設計。與其安裝、檢查、再解除安裝一整疊候選字型,你可以依序載入每個檔案,保留同一段預覽文字,並讓大小滑桿在每個字面上都走過同一組數值。由於預覽字串與字級大小是你腦中的檢查清單的一部分,切換檔案就成了唯一的變數,這讓字重、x 高度與個性上的差異會跳出來,而不是混在一起。
| 比較角度 | 觀察重點 | 為何重要 |
|---|---|---|
| 14-18 px 的內文 | 紋理均勻、內部空間清晰、間距穩定 | 決定長篇閱讀的易讀性 |
| 60-200 px 的標題 | 鮮明的個性、紮實的字重 | 為標題與主標定下基調 |
| 數字與標點符號 | 等寬數字、真實的斜線零、平衡的標點 | 影響資料與介面的清晰度 |
| 字形涵蓋範圍 | 所有需要的附音符號字元與符號都能渲染 | 避免在多語系內容中出現破版文字 |
如果工作流程中還需要在其他情境下取得乾淨、可預期的文字,在挑選字型的同時,把字型檢查與快速跑過 Word Counter 或 Character Counter 搭配使用,可以讓你的文案在符合平台限制的前提下與字型決定保持一致。
預覽字型時的常見陷阱
最常見的錯誤是只憑單一字級判斷字型,而那通常是一個會讓幾乎任何字面都好看的標題用大字級。務必在字級範圍內完整掃過,因為螢幕字型微調、字重與字距都會隨字級變化。另一個陷阱是只預覽字母表;真實文案包含數字、標點與附音字母,而一個出貨時附帶完整拉丁字集的字型,仍然可能缺少你的目標受眾會用到的字形。最後,不要只憑一種背景顏色來信任預覽結果,因為同一個字面在白底上看起來清晰,在深色主題上可能糊成一片,反之亦然。Font Previewer 的快速檔案切換機制,讓你可以在正式採用前輕鬆地對多種背景進行測試。
另一個相關的問題,是把字型的官方宣傳擷圖誤認為它的實際表現。字型樣本頁天生就是用來討喜的,往往以不切實際的超大字級,或經過精心挑選的短句來展示字面。一個使用你自己的內容、自己的字級、自己的背景所進行的即時預覽,才是判斷這個字型在實際專案中表現的唯一可靠方式。
從預覽到正式採用
當字型通過了預覽測試,下一步就要看它最終會在哪個環境登場。對於網頁專案,請把 WOFF 或 WOFF2 檔案複製到你的專案中,並透過 CSS 的 @font-face 規則引用,語法請參考 MDN 網頁文件中的說明。對於桌面應用程式,請依平台廠商建議的程序,把 TTF 或 OTF 安裝到作業系統的字型目錄,例如依循 Microsoft 在 Windows 中管理字型的指引所列步驟。對於設計工具,多數應用程式會在重新啟動或重新整理後自動抓到新安裝的字型。
如果這個字型屬於更大規模的內容工作流程的一部分,最終敲定周圍文字的時候往往也跟字體本身息息相關。像 Case Converter 這類工具可以統一標題的大小寫,而 Text Formatter 則能清除多餘的空白,讓你所選的字面搭配的是乾淨、可預期的文案。
Font Previewer 的設計定位是這條生產流程中的第一步,而非最後一步。透過讓你能以任何 8 到 200 像素之間的字級、使用你自己的文字來試聽任何本機字型檔案,又不會弄亂你的系統,它把字型挑選從一場信仰之舉,轉變成一個你可以提出依據的決定。
相關指南:How to Change Case Fan Speed Labels in Text Files。
若想進一步了解,請參閱 How to Count Lines in a Play Using a Browser Tool。