對中文網頁來說,CSS 字型設定一直是個麻煩的問題,想直接載入字型檔案容量太大,拖慢網頁速度、耗費過多流量,通常會使用網頁字型解決,像是 Google FontsAdobe 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 給出的程式碼稍作修改就能看到效果。

值得一試的三個理由:

  1. 直接在網頁中快速測試不同的字型呈現效果
  2. 可套用 Google Fonts 讓標題及內文使用不同字型
  3. 快速產生對應的 HTML 和 CSS 程式碼