對中文網頁來說，CSS 字型設定一直是個麻煩的問題，想直接載入字型檔案容量太大，拖慢網頁速度、耗費過多流量，通常會使用網頁字型解決，像是 Google Fonts 和 Adobe Fonts（以前叫作 Typekit）就有提供思源黑體和思源宋體等中文網頁字型，只要加入一段 JavaScript 程式碼並調整一下 CSS 樣式表就能使用，讓網頁的中文部分更易於閱讀，設計看起來也更有質感。
雖然 Google Fonts 有非常多的字型選擇，但我們很難知道某個字型套用在網頁中的效果是否符合需求，之前曾介紹過「Font Swap 在任何網頁快速更換字體，從 Google Fonts 選擇免費字型一鍵套用」就是一個很方便的免費 Chrome 外掛，能在任何網頁上快速替換網頁字型，即時預覽效果。
本文要推薦的「Snapfont」是一個讓使用者在任何網站上測試 Google 或本機字型最快方法，透過這個 Google Chrome 瀏覽器外掛就能快速在網頁中套用特定字型即時查看效果，亦可開啟該字型的預覽模式，切換不同字重、字型大小或是查看各種字元在該字型下的顯示樣式。
除此之外，Snapfont 也能在測試後快速產生程式碼，讓開發者直接把看到的設計放進網頁，像是載入 Google Fonts 的 JavaScript 和 CSS 樣式應該怎麼寫等等，對於網頁開發上還蠻有幫助。
Snapfont
https://getsnapfont.com/
使用教學
STEP 1
Snapfont 雖然可以免費使用，但必須要先獲取註冊碼（序號），而這個購買機制是透過 Gumroad 線上購物車採用自由制定公平價格方式，點選「Get Snapfont」按鈕後可以輸入 0 元後將此產品加入購物車結帳。
輸入完 Email 後就會收到 Snapfont 序號。
STEP 2
接著從 Chrome 線上應用程式商店免費下載 Snapfont 擴充功能，安裝到瀏覽器後點選該按鈕會要求輸入「License Key」，將前一個步驟取得的註冊碼複製貼上即可完成啟用。
STEP 3
在網頁中點選 Snapfont 會跳出主功能畫面，會列出你電腦裡安裝的字型和 Google Fonts 字型，上方有個快速搜尋字型名稱的搜尋框，也可依照名稱、樣式數量或篩選器方式排列內容。
稍微測試了一下電腦裡的中文字型好像無法正確套用，不過字型名稱為英文的話就能正確顯示，點選後方的按鈕 B 就是將文字套用到 body，H 則是代表標題，試著點點看會發現網頁的字型發生變化。
舉例來說，我選擇 Noto Serif TC 思源宋體的繁體中文字型就能在網頁上快速套用這個字型，當然你也可以讓內文及標題部分使用不同的字體組合。
STEP 4
如果想知道某個字型在不同大小、字重樣式或是不同字元符號的顯示效果，點選字型最後方的箭頭會開啟字型的詳細資訊頁面，可以利用拖曳方式調整字型大小、勾選不同樣式組合。
點選下方的字元分類後將游標移動到文字上，就會看到某個字元在特定大小的顯示樣式，這部份其實也可以在 Google Fonts 網站做到，透過 Snapfont 讓這個過程變得更簡單更即時。
STEP 5
選擇好你要的內文及標題字型，回到 Snapfont 主功能頁面下方會有一個 Generate CSS 按鈕，可以幫你快速產生對應的樣式程式碼。
例如我要在網頁中使用思源宋體和 PT Serif 兩種字型，Snapfont 會給出兩段的程式碼，包括要在 <head> 部分加入一段載入 Google Fonts 字型檔案的語法，在樣式表部分只要照著 Snapfont 給出的程式碼稍作修改就能看到效果。
值得一試的三個理由：
- 直接在網頁中快速測試不同的字型呈現效果
- 可套用 Google Fonts 讓標題及內文使用不同字型
- 快速產生對應的 HTML 和 CSS 程式碼
