字體透鏡

選取任何文字，點擊右鍵，即可立即檢視其字體、大小、字重、顏色與 CSS — 還可複製、微調、預覽和下載。

您是否曾經瀏覽一個網頁，對其上的字體設計深感讚嘆，並心中好奇「這是什麼字體？」字體透鏡（FontLens）只需輕輕一點，就能為您解答。在任何網站上選取任何文字，點擊滑鼠右鍵，然後選擇「使用字體透鏡檢查字體」。一個乾淨、專注的面板會直接在頁面之上開啟，精確揭示該文字的樣式細節：字體、大小、粗細、行高、顏色，以及設計背後的所有其他細節。無論您是逆向工程分析版面的設計師、需要精準匹配規格的開發者，或僅僅是對某個優美的標題感到好奇，這個工具都能將任何網頁變成一本關於字體排版的開放書。 字體透鏡是一款集字體尋找器與 CSS 檢查工具於一身的擴充功能。它不僅僅告訴您字體家族（font-family）的名稱，更提供您可立即使用的程式碼、一個能測試創意的互動式遊樂場，以及確保文字可讀性的無障礙工具。無需帳號，不用註冊。只需選取、右鍵點擊、然後檢查。 🔍 您可以做什麼 - 揭示任何選定文字的完整排版細節：字體家族、字體大小、字體粗細、行高和顏色，一目了然 - 查看容易忽略的額外樣式，例如字元間距（letter-spacing）、文字轉換（text-transform）和字體樣式（font-style） - 一鍵複製任何單一屬性，或將整組規則作為完整的 CSS 程式碼片段抓取 - 透過簡單的頁籤將程式碼片段轉換為 Tailwind、SCSS 或 SASS，然後整段或逐行複製 - 在即時、可編輯的預覽中進行實驗：重寫範例文字、微調數值、更換背景，並即時觀看更新 - 透過供應商標章（Google Fonts、Adobe Fonts、自行託管或內建系統字體）識別網路字體的來源 - 使用「下載字體」按鈕將網路字體儲存到您的電腦，直接從其來源處提取 - 根據 WCAG 標準檢查色彩對比度，提供精確的比例值以及 AA 和 AAA 等級的通過或失敗結果 - 使用功能齊全的檢色器挑選與取樣顏色，包含一個滴管工具可抓取螢幕上任何像素的顏色 - 在 px、rem、pt 和 em 之間切換測量單位，此設定會同時應用於欄位顯示和匯出的程式碼 🖱️ 運作方式 使用字體透鏡只需幾秒鐘。選取您想研究的文字，在選取範圍上點擊滑鼠右鍵，然後從選單中選擇「使用字體透鏡檢查字體」。面板會出現在目前頁面之上，其風格經過精心設計，絕不會與網站本身的外觀發生衝突。從那裡，您可以閱讀詳細資訊、複製您需要的內容，或開始編輯。 即時預覽功能是樂趣所在。更改文字以測試真實的標題效果，微調大小，調整粗細，或設定新的背景顏色，看看字體在不同情境下的表現。您的編輯會在您切換頁面或稍後返回時保留下來，因此您在一個網站上開始的想法，在下一個網站上依然等著您。當您想恢復原始數值時，「重設為網站樣式」按鈕會將所有設定還原為頁面實際使用的樣式。 需要原始字體檔案嗎？對於可下載的網路字體，只需一個按鈕即可從其 @font-face 位置獲取真實的檔案。對於已隨您作業系統附帶的字體，字體透鏡會告訴您這是一個內建字體，讓您知道無需任何下載即可使用。 🔒 隱私優先 字體透鏡完全在您的瀏覽器內部運行。在檢查文字的過程中，絕無任何資料收集、追蹤、分析行為，也無涉任何外部伺服器。您所檢查的一切都保留在您的電腦上。此擴充功能只會發出一次網路請求，且僅在您刻意按下「下載字體」按鈕時才會發生，此時它會連線至該字體的來源以擷取檔案。除此之外，沒有任何資料會離開您的裝置。 權限要求刻意設計得極其有限。「右鍵選單」權限是為了新增右鍵點擊的選項。 「當前分頁」權限讓工具能夠讀取您在啟用它的分頁上所選取的文字，且僅限於該分頁。 「儲存」權限則用於記住您的預覽文字、單位和格式偏好，以便您下次使用。工具絕不會廣泛存取您的瀏覽歷史記錄，也沒有全面的主機權限。 👥 適用對象 - 想要快速識別字體、捕捉調色板並重複使用樣式的網頁設計師 - 需要匹配設計稿或將精確的字體家族和間距數值應用於程式碼的前端開發者 - 建立一致、符合品牌風格的字體系統的 UI 與 UX 工程師 - 想要了解真實網站如何構成的 CSS 與字體排版學習者 - 在產品發布前驗證文字是否符合 WCAG 對比度要求的無障礙稽核員 - 純粹想知道某個網站使用什麼字體的部落客、行銷人員與充滿好奇心的讀者 ✨ 為何人們會持續使用它 - 只需右鍵點擊一下即可獲得答案，無需在開發者工具中費力尋找 - 程式碼已準備就緒，可直接複製為純 CSS、Tailwind、SCSS 或 SASS 格式，直接放入您的專案中 - 可編輯的預覽功能讓您無需修改任何一行程式碼就能進行字體選擇的原型設計 - 對比度檢查工具將無障礙考量融入您的工作流程，而不是將其視為事後補救的工作 - 檢色器和滴管工具意味著您可以從頁面任何地方取樣並重複使用精確的顏色 - 淺色與深色主題會自動跟隨您的作業系統設定，無論白天或夜晚都讓您感覺舒適自在 - 在 px、rem、pt 和 em 之間切換單位，使輸出結果與您程式碼庫的編寫方式保持一致 🎨 深入了解細節 字體排版不僅僅是一個名稱。字體透鏡揭示了那些讓文字感覺恰到好處的微小決策，從標題的粗細，到行高所提供的呼吸空間，再到字元間距的細微調整。並列查看這些數值有助於您理解一個設計為何成功，以及如何重現它。供應商標章也提供了額外的背景資訊，讓您一眼就能知道您正在查看的是 Google Fonts 的資源、Adobe Fonts 的字型、自行託管的檔案，還是系統預設字體，這往往是您著手匹配或尋找字體時的第一個線索。 色彩工具的功能不僅僅是靜態的數值讀取。檢色器提供一個帶有色相和透明度滑桿的 HSV 方塊，並且支援 HEX、RGB 和 HSL 格式，讓您可以使用任何您習慣的格式工作。將其與滴管工具搭配使用，您便可以從任何元素上提取精確的色調，並將其放入您的預覽或筆記中。 🚀 開始檢查 立即新增字體透鏡，選取一些文字，然後點擊右鍵，揭示任何頁面背後的排版、樣式和顏色。對於任何關心網路閱讀體驗的人來說，它是一個快速、私密且真正實用的好夥伴。安裝它，隨時取用，再也不用為神秘的字體感到困惑。