右鍵字型檢視
從頁面的內容選單開啟擴充功能，檢視即時排版細節，例如字型家族、字重、字級、顏色、對比度，以及可用的字型檔資訊。
概覽
Tinkerfont 是一款瀏覽器擴充功能與附加元件，用於測試即時網站上的排版。它專為檢視字型、以替代字型取代原字型，並在變更樣式表或設計系統之前，先確認它們在真實內容、版面與 breakpoint 上的表現而打造。
這個產品可在 Chrome 與 Firefox 中使用，適合想在情境中評估字型選擇的人。它支援右鍵字型檢視、DOM 掃描、Bunny Fonts 搜尋、自訂字型上傳、元素範圍限定，以及依 hostname 的持久化，方便日後回到同一套測試設定。
功能
即時字型偵測
掃描即時 DOM，查看頁面上實際使用了哪些字型家族，包含數量，接著可針對單一字型家族，或以萬用字元替換所有字型。
一鍵字型替換
搜尋 Bunny Fonts 或上傳自訂字型檔，然後直接在目前頁面預覽替換結果，不必編輯 CSS 或部署程式碼。
區域限定
選取特定元素，將字型變更限制在頁面的某一部分，例如導覽列、表格或英雄區塊，而不是影響整個網站。
按站點儲存規則
依 hostname 儲存替換規則與限定範圍，讓網站在重新整理與日後造訪時都維持相同的預覽設定。
匯出與匯入設定
將規則以 JSON 備份，並在另一個瀏覽器中還原；匯入後，自訂字型仍需重新上傳。
常見使用情境
即時內容上的排版檢視
將替代字型與實際文章、登陸頁或介面進行比較，而不是與 mockup 比較，這樣就能在情境中測試間距、層級與可讀性。
實作前字型測試
在將 CSS 變更落地之前，先在 staging 或 production 頁面上預覽一小組候選字型，減少在設計工具與程式碼之間來回切換的需要。
限定區段測試
當你只想一次評估一個區域時，可將字型實驗限制在導覽列、英雄區塊、表格或其他頁面區段。
即時字型稽核
檢視頁面字型、從內容選單複製值，並利用即時結果在調整前理解網站目前使用的內容。
瀏覽器間設定移轉
透過匯出設定並在其他地方匯入，將既有的一組字型規則移到另一個瀏覽器或裝置。
Pros and Cons
Pros
- 直接在即時頁面上運作，因此你可以用真實內容與版面來判斷字型選擇。
- 同時支援 Bunny Fonts 與上傳字型檔，讓你能在目錄搜尋與自訂字型之間選擇。
- 可以將變更限制在頁面的單一區域，而不是全站套用同一種替換。
- 依 hostname 儲存規則，對於回到同一網站或測試環境很有幫助。
- 包含 Export 與 Import，可在瀏覽器之間移轉設定。
Cons
- 來源未顯示任何定價級距或付費方案細節，只提到產品可免費使用。
- 部分頁面無法測試，包括受限制的瀏覽器頁面，例如 chrome:// URL 與 Chrome 線上應用程式商店。
- 自訂字型可以作為規則匯出與匯入，但在新裝置上匯入後，字型檔本身仍需要重新上傳。
FAQ
Tinkerfont 用來做什麼？
Tinkerfont 是一款用於即時網站字型原型設計的瀏覽器擴充功能。它可讓你檢視頁面上的字型，使用 Bunny Fonts 或你自己的上傳檔案替換字型，並在更改 CSS 前先於真實內容上檢視結果。
Tinkerfont 是免費的嗎？
可以。頁面說明 Tinkerfont 可免費安裝與使用，而可選擇的支持者捐助有助於資助開發。現有來源未提及付費方案或使用限制。
Tinkerfont 支援哪些瀏覽器？
Tinkerfont 可用於 Google Chrome 與 Mozilla Firefox。網站也註明，支援 Chrome 擴充功能的 Chromium 系瀏覽器可能可搭配 Chrome 版本使用，但 Chrome 與 Firefox 才是其測試與發布所支援的瀏覽器。
我可以在 Tinkerfont 中測試自己的字型嗎？
你可以在 Custom 分頁上傳 .woff2、.woff、.ttf 或 .otf 檔案。這個擴充功能也支援搜尋 Bunny Fonts，並直接在頁面上套用替換。
我可以保留或轉移我的字型設定嗎？
可以。替換規則與區域範圍會依 hostname 儲存在本機儲存空間中，而擴充功能也在面板標頭提供 Export 與 Import 動作，方便你將設定移到其他瀏覽器。
Quick Facts
- 類別
- 瀏覽器擴充功能
- 平台
- Google Chrome, Mozilla Firefox
- 主要用途
- 即時網站上的字型檢視與排版原型設計
- 來源網域
- mighil.com
- 字型來源
- Bunny Fonts 與自訂上傳
- 儲存方式
- 依 hostname 使用本機儲存空間
Tinkerfont 替代品
ByteAsk
ByteAsk 是專為 C 與 C++ 打造的終端機優先 AI coding agent，先編輯儲存庫再用真實編譯器、除錯器、sanitizer 與測試驗證變更，並提供免費方案與付費方案。
Manta AI
Manta AI 是一款自動化網頁應用測試工具，從 URL 即可開始探索、建立行為地圖，並以自然語言產生測試與回歸檢查，無需撰寫腳本或維護 selector。
EAS Observe
EAS Observe 是適用於 Expo 與 React Native 應用程式的正式環境效能監控工具，可在 Expo 儀表板查看啟動指標、工作階段時間軸、版本標記與錯誤。
Traccia
Traccia 是一個代理可觀測性與治理平台，提供 OpenTelemetry 原生追蹤、政策強制、提示評估與合規證據，支援 LangChain、CrewAI、OpenAI Agents SDK、AutoGen 與 LlamaIndex。
Hoplite
Hoplite 是一個雲端程式碼代理平台，讓團隊能在隔離沙箱中執行軟體任務，並保留儲存庫內容與匯入的本機設定；提供 Pro、Scale 與 Enterprise 方案。
LoupeKit
LoupeKit 是瀏覽器面板，可即時檢視網頁的技術堆疊、版面、SEO、無障礙與 AI 生成程式碼異味；支援覆蓋頁面使用，並提供免費版與 Pro 匯出、報告、建議及伺服器端讀取。