Aa
找出字體名稱
看到喜歡的標題嗎？選取它就能查看字體家族、粗細和來源：Google Fonts、Adobe Fonts，或網站本身。
免費 Chrome 擴充功能
辨識網頁字體？按右鍵查看 CSS
選取任何網頁上的文字，按右鍵並選擇「Inspect font with FontLens」。字體檢查器會浮在頁面上，顯示字體家族、大小、粗細、行高與顏色，並提供可複製的 CSS 和字型下載按鈕。
也適用於 Edge、Brave、Opera 和其他 Chromium 瀏覽器。
快速總覽
- 功能
- 顯示你選取文字的字體家族、大小、粗細、行高、顏色，以及其他與預設值不同的樣式，並可直接複製 CSS。
- 開始使用
- 選取文字，按右鍵並選擇「Inspect font with FontLens」。只有選取文字時才會顯示此選單項目。
- 複製格式
- CSS、SCSS、SASS 或 Tailwind，字體大小可使用 px、rem、pt 或 em。
- 字型檔案
- 按下「Download font」即可從 @font-face 來源取得網頁字型。使用前請確認字型授權。
- 適用對象
- 網頁設計師、前端開發者、無障礙檢測人員，以及正在學 CSS 的學生。
- 價格
- 免費。無需帳戶，沒有付費版本。
- 資料
- 在你的瀏覽器中執行。沒有伺服器，也不會分析資料。只有你主動下載字型時才會發出網路請求。
- 適用於
- Chrome 和其他可從 Chrome Web Store 安裝擴充功能的 Chromium 瀏覽器。不支援 Firefox、Safari。
- 限制
- 讀取網頁上實際文字的 CSS。無法讀取圖片、畫布或 PDF 中的文字，也不適用於 Chrome 內建頁面。
- 版本
- 2.2.0，更新於 2026年10月23日
兩步查看網頁字體
- 1
選取文字
在任何網頁上選取標題、段落或按鈕文字。
- 2
按右鍵
選擇「Inspect font with FontLens」。檢查器會浮在頁面上，顯示字體家族、大小、粗細、行高與顏色。
- 3
複製或調整
複製 CSS 或 Tailwind，在即時預覽中試試其他大小或顏色，也可以下載字型檔案。
這些時候派得上用場
{ }
比對設計稿
將正式網頁上的數值與設計檔比較，再複製成 CSS、SCSS、SASS 或 Tailwind 規則。
4.5:1
檢查對比度
查看對比度與 AA、AAA 等級，在設計上線前試試較深的文字或較淺的背景。
功能特色
附參考線的字型範例
顯示字體堆疊中的第一款字體，並標出依字體本身測量的大寫字高、x 字高與基線。
程式碼格式
支援 CSS、SCSS、SASS 和 Tailwind。可複製整段程式碼或單行內容，並記住上次使用的格式。
自選單位
在欄位和程式碼中以 px、rem、pt 或 em 顯示大小。rem 會依照該網頁的根字級計算。
字體來源
標籤會指出字體來自 Google Fonts、Adobe Fonts、自行託管服務，或電腦上已安裝的系統字體。
對比度檢查
顯示文字與背景的對比度，以及一般和大型文字的 AA、AAA 等級。調整顏色後會即時更新。
下載字型
從 @font-face 來源取得檔案，並以字體家族名稱命名。如果伺服器阻擋下載，會在新分頁開啟字體來源。
為什麼用 DevTools 找字體這麼花時間？
網頁會列出一串字體，瀏覽器會使用第一款可用的字體。想知道實際用的是哪一款，就得開啟 DevTools、找到元素、查看 Computed 面板，再到 Network 面板尋找字型檔案。大小、粗細、行高和顏色也分散在不同位置。
字體透鏡會讀取你選取文字的計算樣式，並在同一個面板整理出字體家族清單、第一款字體範例、各項數值、字體來源和 CSS。它讀取網頁 CSS，因此無法辨識圖片中的字體。
資料不會離開你的瀏覽器
不需帳戶，也沒有伺服器
字體透鏡在你的瀏覽器中執行，不會分析或追蹤資料。
只讀取你選取的文字
檢查器只會讀取你按右鍵的文字樣式，不會將網頁資訊傳送到任何地方。
四項權限
右鍵選單需要內容選單權限；開啟檢查器需要目前分頁和網頁存取權限；範例文字、單位與程式碼格式則儲存在本機。
Chrome DevTools 與字體透鏡比較
| Chrome DevTools 與字體透鏡比較 | Chrome DevTools | 字體透鏡 |
|---|---|---|
| 查看一段文字使用的字體 | 檢查網頁、尋找元素，再開啟 Computed 面板 | 選取文字、按右鍵，選一個選單項目 |
| 複製為 Tailwind 或 SCSS | 不行，必須逐一複製數值 | CSS、SCSS、SASS 或 Tailwind 分頁 |
| 查看字體來源 | 在 Network 面板搜尋字型檔案 | 標籤顯示 Google Fonts、Adobe Fonts、自行託管或系統字體 |
| 下載字型檔案 | 在 Network 或 Sources 找到後儲存 | 按一下按鈕 |
| 檢查對比度 | 在 Styles 面板的色彩選擇器查看 | 即時預覽旁顯示 AA、AAA 等級 |
| 價格 | 內建功能 | 免費 |
常見問題
如何找出網站使用的字體？
將字體透鏡新增至 Chrome，選取網站上的文字，按右鍵並選擇「Inspect font with FontLens」。你會看到字體家族、大小、粗細、行高、顏色和來源。
如何複製網站字體的 CSS？
在檢查器中選擇 CSS、SCSS、SASS 或 Tailwind 分頁，按下「Copy all」，也可以只複製單行。需要時，先將單位切換為 px、rem、pt 或 em。
可以從網站下載字型嗎？
如果文字使用網頁字型，「Download font」會從 @font-face 來源取得檔案。系統字體沒有可下載的檔案。在自己的專案使用前，請確認字型授權。
能辨識圖片或 PDF 裡的字體嗎？
不能。它讀取網頁上實際文字的 CSS，因此無法辨識圖片、畫布或 PDF 裡的字體。
如何依照 WCAG 檢查文字對比度？
預覽會顯示文字與背景的對比度，以及一般和大型文字的 AA、AAA 等級。更改任一顏色後，等級就會更新。
可以用 rem 而不是 px 顯示大小嗎？
可以。切換成 px、rem、pt 或 em 後，欄位和程式碼都會套用該單位。rem 依網頁根字級計算，你選擇的單位也會保留下來。
這是免費的嗎？會收集資料嗎？
免費使用，也不需要帳戶。沒有伺服器或資料分析；只有你主動下載字型時才會發出網路請求。
支援 Edge、Brave 或 Opera 嗎？
大多數 Chromium 瀏覽器都能從 Chrome Web Store 安裝擴充功能，包括 Edge、Brave、Opera 和 Vivaldi。不支援 Firefox 和 Safari。
