Snapfont 在網頁即時套用測試 Google Fonts 和本機字型顯示效果(Chrome 擴充功能)

最後更新於 2020 年 07 月 07 日

對中文網頁來說,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 程式碼

 

相關的文章

在 Google 搜尋結果加入切換不同國家語言的選項(Chrome 擴充功能)

現今搜尋資料時大家一定會先去求助 Google 大神,如果撇開隱私不說,Google 搜尋引擎確實能找到非常多的結果,而且內容相當準確,這當中存在很多技術,例如 Google 會依照使用者來源國家和使用語言等等顯示出最適合的搜尋結果,畢竟它強調的是解決問題,與其說是給使用者相關結果更不如說是提供解答。不過另一方面也就表示搜尋結果會受限於個人化,若沒有透過一些選項調整很難找到其他國家語言的搜尋結果。

Real search box in New Tab Page 在 Chrome 新分頁使用真正的搜尋框

想了一下自己的使用習慣,好像已經不太倚賴瀏覽器開新分頁後的功能,像是搜尋或是快速開啟常用網站,自從安裝「Empty New Tab Page 讓 Google 瀏覽器新分頁空白」外掛後現在新分頁又回到空白一片,如果要透過瀏覽器搜尋也很習慣手動開啟 Google 首頁,而不是直接從網址列進行搜尋,儘管網址列現在除了輸入網址,也能快速將關鍵字透過你習慣的瀏覽器搜尋。

Google Search Ads Highlighter 為搜尋結果的廣告加入不同背景色效果(Chrome 擴充功能)

Google 去年在行動搜尋上推出新的樣式,最主要的外觀差異就是將網站的品牌往上移動,並將網站名稱及網站圖示(favicon)顯示於搜尋結果上方,聲稱能幫助使用者更了解資訊來源和要尋找的頁面。今年一月 Google 決定將這個更新推送到桌面版搜尋,但引來不少使用者反彈,例如搜尋結果混雜著網站標誌看起來非常凌亂,而且顯示於頂部的廣告因為標誌變小很容易引起誤點(被誤認為是一般搜尋結果),後來在十天左右就緊急將網站標誌拿掉,並決定進行新的實驗以找出更適合放置網站圖示的位置。

DuckDuckSometimes 搜尋時有一定機率使用 DuckDuckGo 取代 Google

如果你有長期關注網際網路的隱私權問題,應該會知道隱私和日常使用的軟體或網路服務密不可分,舉例來說,不過度依賴 Google、Facebook 等超大型服務會是一個方式,我之前曾介紹過「No More Google」就是一個收集各種 Google 服務替代方案的網站,而每個人都會遇到的搜尋引擎則更推薦使用 DuckDuckGo,注重個人隱私、不紀錄使用者資訊的搜尋引擎,或許你已經在使用,也或許你從來沒有聽過。

Favicon.io 最強大的網站圖示產生器,可線上文字製作或以圖片轉換

前段時間在研究網站圖示(Favicon)如何正確運作,對有在經營網站的站長來說一定知道在網站加入識別圖案的重要性,一般來說,加入網站圖示的作法並不困難,甚至很多網站會說只要一段原始碼就能做到,但現在因為有行動裝置作業系統,也要考量到網站被新增到桌面時會用到不同圖示尺寸,因此就必須額外準備各種不同尺寸大小的網站圖示。

回應