在任何頁面上檢查字型
游標移到文字上並點擊，即可在元素旁或側邊欄中查看即時字型、大小、粗細、樣式與顏色——無需開啟 DevTools。
what the font - font finder
辨識任意網頁元素的字型與 CSS 排版資訊——字型家族、大小、粗細、行高、字距、顏色與對比度——無需離開目前分頁即可複製或匯出所需內容。
為即時排版而生
功能
關鍵的排版詳情
在一個面板中查看行高、字距、變形、裝飾與對比度（含 AAA/AA 提示）。
一鍵複製 CSS
複製所檢查元素的字型家族、顏色或可直接使用的 CSS 程式碼片段。
在頁面上編輯樣式
即時調整元素的粗細、大小、間距、顏色等，探索完成後可一鍵重設。
頁面上的全部字型
掃描頁面中所有獨特的文字樣式，在設計系統審查時快速跳轉。
匯出與 Google Fonts
將排版匯出為 SCSS 或 JSON，或開啟 Google Fonts 搜尋找到的字型家族。
簡潔設計
關於我們
一款 Chrome 擴充功能，可顯示即時排版資訊——字型、大小、粗細、顏色與對比度——讓您在任何網頁上檢查、複製與匯出字型。
- —
- 已發布使用總量
- —
- 已驗證評價數量
Chrome Web Store
使用者評價
範例回饋占位 — 接入後將替換為 Chrome Web Store 真實評價。
★★★★★
“無需開啟 DevTools，就能從即時網站取得字型家族、粗細與十六進位顏色。”
★★★★★
“在一個面板中複製 CSS 與對比度資訊，正是稽核時需要的功能。”
★★★★★
“「頁面上的全部字型」幫我快速發現登陸頁中不一致的字型樣式。”
三個簡單步驟
使用方法
-
安裝擴充功能
從 Chrome Web Store 新增 what the font - font finder，並將其固定到工具列。
-
開始檢查
開啟彈出視窗，開始檢查，然後游標移到頁面上的任意文字並點擊。
-
複製或匯出
複製 CSS、匯出樣式、開啟 Google Fonts，或瀏覽頁面上的全部字型。
安裝前的解答
常見問題
如何辨識網站上的字型？
安裝 what the font - font finder，開始檢查，游標移到文字上並點擊，即可開啟顯示字型家族、大小、粗細與顏色的面板。
可以複製所見文字的 CSS 嗎？
可以。在面板中可複製字型家族、顏色或所檢查元素的 CSS 程式碼片段。
是否適用於所有頁面？
適用於一般網站分頁。Chrome 系統頁面與部分受限 URL 無法檢查。
可以查看頁面上使用的所有字型嗎？
使用「頁面上的全部字型」列出所有獨特的可見文字樣式，並在詳情面板中開啟任意一項。
檢查時能否修改外觀？
可以。編輯元素的粗細、大小、間距、顏色及相關樣式，然後重設以恢復原始樣式。
從哪裡開啟 Google Fonts？
當字型家族名稱可搜尋時，在面板中使用 Google Fonts 操作，即可開啟該名稱的搜尋頁面。