Type Sample 輕鬆查詢、辨識網頁使用的字體名稱和大小（Chrome 擴充功能）

先前我曾經介紹過不少在網頁內辨識字型的工具，例如 Fontface Ninja、WhatFont Tool，這些服務對於網頁設計師來說尤其重要。如果要找出某個網頁所使用的字型，比較土法煉鋼的作法是去找網頁的 CSS 樣式檔，但不僅費時而且不容易快速得到我們所需要的資訊，這時候透過這些工具可以減少麻煩，而且也能準確找到某個網頁使用的字體名稱、大小。

本文再介紹另一個類似的 Google Chrome 擴充功能 TypeSample，若你平常會需要查找在某個網站上所使用的字體名稱和字型大小，透過 TypeSample 可直接將某段文字的字體名稱顯示於網頁內，讓你更快找到網頁所使用的字型資訊。

不僅如此，TypeSample 還會有測試框讓你直接於工具上輸入文字進行預覽，調整字體大小以看出在不同大小的顯示樣式，甚至是直接瀏覽從 A-Z 所有文字樣式，非常方便。

若你不是使用 Google Chrome 瀏覽器，TypeSample 也提供書籤列（Bookmarklet）功能，點選後就能直接在網頁內開啟 TypeSample 工具囉！

網站名稱：Type Sample
網站鏈結：https://www.typesample.com/

使用教學

Step 1

開啟 Type Sample 網站後，若要安裝 Google Chrome 擴充功能，可點選 Install for Chrome 按鈕，若不是使用 Google 瀏覽器，或者不想安裝外掛，也可以把 Type Sample 按鈕直接拖曳到書籤列，點選後就能開啟 Type Sample 功能。

Step 2

在任何網頁內點選 Type Sample 功能後，將滑鼠游標移動到文字上，就會標示出某段文字所使用的字型名稱、字體大小。

Step 3

點選後 Type Sample 會在網頁上方顯示出一個測試用的工具欄位，除了可以直接在上面輸入文字、測試樣式外，還能快速搜尋該字型在 Google 及 Fonts In Use 的相關資料，利用左上角的拖曳鈕可調整測試文字的大小。

Step 4

如果你想將測試的文字效果保存下來，以便日後可以參考、使用，點選測試工具右上角的 Save Sample 按鈕，會開啟 Type Sample 網站並顯示你所輸入的範例文字，點選 Sign In with Twitter 登入 Twitter 帳號後就可以把範例儲存起來。

Step 5

另外，比較方便的是 Type Sample 還能夠快速顯示某個字型在大小寫 A-Z、數字、標點符號所呈現的樣式（從測試工具右下角來切換），讓你無須下載、安裝字型就能看到該字型的常用字元效果，真的非常方便喔！