Fonts Ninja 字體辨識教學：一秒找出網頁用的字型，設計師必備神器
如何找出網頁用的字體？最快的做法是安裝一款字體辨識瀏覽器擴充功能，把游標移到目標文字上，工具即顯示字體名稱、字級、行距、字距、顏色色碼與下載連結。Fonts Ninja 是這類工具…
如何找出網頁用的字體？最快的做法是安裝一款字體辨識瀏覽器擴充功能，把游標移到目標文字上，工具即顯示字體名稱、字級、行距、字距、顏色色碼與下載連結。Fonts Ninja 是這類工具裡資訊最完整的一個，能做到五項資訊一次給齊：字體名稱、font-size、line-height、letter-spacing、color，外加購買或免費下載連結 [來源：〈Fonts Ninja〉〈https://fonts.ninja〉〈2026〉]。英文字體辨識準確度高，中文則因字型檔子集化需搭配開發者工具驗證。
重點先看：裝 Fonts Ninja 游標懸停即抓到字體名稱、字級、行距、字距、顏色與下載連結五項資訊一次到位，這才是它勝過只報名字的 WhatFont 的地方。
字體辨識的三秒取樣與開發者工具的盲區
字體辨識瀏覽器擴充功能把「想知道某網站用的字體」這件事壓縮成一次游標懸停：工具直接顯示字體名稱、字級、行距、顏色色碼與下載連結，全程不必打開開發者工具。在這類擴充功能裡，英文字體查詢的主流選擇 Fonts Ninja 資訊最完整，會一次給齊字體名稱、字級（font-size）、行距（line-height）、字距（letter-spacing）、顏色色碼（color），外加購買或免費下載連結。
開瀏覽器開發者工具（F12 → Network → Fonts）雖然不必安裝任何外掛，但它只看得到網站實際載入的字型檔檔名，讀不到設計師真正在意的字級、行距、字距與顏色。它告訴你「載了什麼檔」，卻不告訴你「它被設成多大、多寬鬆、什麼顏色」，而這後面三項恰恰是決定版面看起來高級或平庸的關鍵，也是排版設計的字體與行距設定真正會搬走的參數。
一鍵辨識型的擴充功能（Fonts Ninja、WhatFont、Fount）省去手動翻原始碼的麻煩，是現在設計師取樣的主流做法。差別在深度：只有 Fonts Ninja 會把完整參數全部列出來，其他工具多半報完名字就沒了。實戰節奏是用擴充功能做第一層辨識，再用開發者工具交叉驗證可疑結果，特別是遇到自訂字體或字型被子集化的網站。「3 秒」這個時間感有一個前提：工具已經裝好、釘選好、懸停取樣的節奏也跑熟了。第一次摸工具的人，從安裝到看到第一個結果可能要花兩三分鐘；流程順了之後，每次取樣就是游標移過去的瞬間，把工具列釘選與肌肉記憶建立起來，是省下其餘時間的唯一方法。
Fonts Ninja 是什麼：不只報名字，更像字體採購助理
Fonts Ninja 是一款瀏覽器擴充功能（前身為 Fontface Ninja），能在任何網頁上即時辨識字體，並同步顯示字級、行距、字距、顏色色碼，還能把字體加入收藏、在頁面上即時試換預覽，最後直接連到官網購買或免費下載。把它定位成「字體採購＋排版取樣工具」比單純叫它「字體辨識神器」更貼切，因為辨識只是入口，後面那一整套採購與預覽流程才是它真正拉開差距的地方。
具體拆開它的能力，會發現它跟只報名字的工具完全不是同一種產品。游標移到文字上，第一層就吐出字體名稱，不用截圖、也不用把圖丟到第三方網站排隊。再往下一層，它把 font-size、line-height、letter-spacing、color 一起帶出來，這四個值正是重建別人排版樣貌的關鍵，少一個都不行。再往下還有兩個常被忽略的功能：即時預覽（直接在外掛裡把頁面文字換成別的字體，先看效果再決定要不要掏錢，WhatFont 那類工具沒有這一段），以及採購與收藏（判斷字體是開源還是付費、附官網連結、把查過的字體存成清單，方便同一專案反覆使用或丟給團隊）。
這些能力疊起來，Fonts Ninja 同時覆蓋了辨識、採購、取樣三條需求：辨識回答「這是什麼字」，採購回答「去哪買、要不要付費、授權怎麼算」，取樣回答「怎麼把這個版面的質感搬回自己專案」。多數免費工具只做第一條，一旦需求跨到採購或取樣，差距就會浮現。很多人裝好之後只用第一層「報名字」就關掉，直到要把國外品牌的標題字搬進自己專案，才發現少了字級、行距、顏色這幾個值，知道字體叫什麼也做不出同樣的味道。
這套組合能力也讓它成為網頁配色與色碼取樣、品牌官網設計工作流程裡很順手的入口工具：字體與顏色本來就是同一個視覺系統的兩面，能在同一個浮窗裡一起抓，就不用切換好幾個軟體。
Fonts Ninja 安裝與使用教學：5 步驟上手
Fonts Ninja 的安裝與使用流程很短，到瀏覽器擴充功能商店搜尋 Fonts Ninja 安裝、固定到工具列後，在任何網頁點一下圖示啟用，把游標移到想查的文字上就會顯示字體資訊；想看完整排版參數與下載連結，再點懸停浮窗進入詳細面板即可。下面把這段流程拆成 5 個可照做的步驟。
- 步驟 1 安裝：在 Chrome 線上應用程式商店（或 Firefox、Edge 對應的擴充功能商店）搜尋「Fonts Ninja」並點選新增至瀏覽器。
- 步驟 2 釘選：把圖示釘選到工具列，方便隨時點選啟用或關閉，不必每次都去擴充功能選單裡翻。
- 步驟 3 啟用：開啟任意網頁，點一下 Fonts Ninja 圖示啟動偵測，游標會進入取樣模式。
- 步驟 4 取樣：游標移到目標文字，浮窗顯示字體名稱；點進去可看字級、行距、字距、顏色等完整參數。
- 步驟 5 應用：在面板內可收藏字體、即時試換預覽，或點下載連結前往官網取得（開源免費或付費購買）。
這 5 步裡，第 4 步最容易被忽略：很多人停在浮窗只看到字體名稱就關掉，沒點進去看完整面板，等於跳過最有價值的那一頁。第 5 步的即時預覽值得多花兩分鐘，把頁面上的標題暫時換成收藏清單裡的其他字體，直接在原網站排版上比對，這比把字體下載下來再開 Photoshop 試快太多。第一次裝好之後，建議先拿一個你本來就覺得好看的網站走完整 5 步一遍，流程跑順之後，從靈感到可照用的參數大約就是3 秒到 30 秒的事。如果你是WordPress 架站新手或正在學CSS 入門，這套流程能把「我喜歡這個網站的字」直接轉成可貼進 CSS 的數值。
取樣時還有一個訣竅：同一個網站最好主標、副標、內文、按鈕文字各取一次。一個成熟的品牌網站往往會用兩到三個字體家族搭配（標題用展示字體、內文用易讀字體、按鈕用中性字體），只取一層等於只看到半張臉。另外啟用時要留意：取樣模式下整個頁面會進入懸停感應狀態，這時點擊連結不一定會觸發跳轉，取完樣記得再點一次圖示關閉。
Apple、Tesla、蝦皮：三種版型怎麼取樣
用 Apple、Tesla、蝦皮三個不同類型的網站示範最直觀。開啟網站後啟用 Fonts Ninja，游標移到主標與內文上即可讀到字體名稱與字級參數，再點入面板看顏色色碼與下載連結。這三個案例分別代表極簡品牌字體、科技感無襯線字體、與在地化電商字體的取樣情境，涵蓋品牌官網、科技產品頁與密集商品資訊頁三種最常見的取樣對象。
| 示範網站 | 取樣重點 | 值得記下的參數方向 |
|---|---|---|
| Apple | 用單一字體家族撐起極簡排版 | 大字級、寬鬆行距、極低字距 |
| Tesla | 科技感無襯線字體的俐落感 | 偏重字重、收緊字距、高對比 |
| 蝦皮 | 密集商品資訊下的可讀性配置 | 適中字級、緊湊行距、促購色碼 |
Apple 那種留白配上超大標題的質感，不是字體本身的功勞，而是字級開得夠大、行距放得夠鬆，這兩個參數才是複製它的關鍵。如果你正在做作品集網站設計或研究標題排版設計，Apple 的參數配置值得直接抄進設計文件。Tesla 的標題則常用偏重的字重配上收緊的字距，營造俐落、工業、精準的味道，可作為工業風排版的取樣對象。
蝦皮代表的是另一套邏輯：電商網站要在極小的空間塞進商品名、價格、折扣、庫存，字級偏緊湊，顏色靠對比來引導視線（紅色價格、橘色折扣），這是可讀性與促購之間的取捨。取樣這三類網站時，順手把參數填進同一張表，久而久之就會累積出屬於自己的「排版參考庫」，下次做品牌官網、產品頁、電商頁，直接從庫裡挑一組接近的配置微調，而不必從零想字級行距。
把字級、行距、字距、顏色一起抄進設計文件，這些才是版面看起來好看的真正參數；這套取樣思路跟網頁版面與響應式排版、網頁排版設計範例是互通的。
免費版與付費方案的界線
Fonts Ninja 提供免費版本，可完成基本的字體辨識與排版參數查看，但進階功能（如完整即時預覽、跨裝置同步收藏、無限制書籤）需升級付費方案；實際價格與方案內容以 Fonts Ninja 官網公告為準。多數偶爾取樣的設計師用免費版就夠，重度採購或團隊協作才需要考慮付費。下面表格中標註「以官網為準」的金額是刻意不寫死的：字體工具定價會隨方案調整，寫死數字反而會誤導。
| 能力 | 免費版 | 付費方案 |
|---|---|---|
| 游標懸停辨識字體 | 有 | 有 |
| 查看字級／行距／字距／顏色 | 有 | 有 |
| 即時預覽換字體 | 受限 | 完整 |
| 收藏書籤數量 | 有限制 | 無限制 |
| 跨瀏覽器／跨裝置同步 | 無 | 有 |
| 字體資料庫與採購折扣 | 基本 | 更完整 |
| 方案金額 | 免費 | 以官網公告為準 |
要判斷自己該不該升級，可以問三個問題：一個月實際用幾次、是否需要把收藏清單同步到第二台裝置、是否一年內會採購超過一個付費字體。三個都答否，免費版綽綽有餘；三個都答是，付費方案的同步與採購資料庫才會真正回本。落在中間的人，多半是「偶爾多裝置切換」這種邊際需求，先用免費版撐、等痛點真的出現再升級，會更省。
授權這件事要單獨講清楚，因為它是新手最容易踩的雷：工具只幫你找到字體，商用前仍須自行確認字體授權條款。開源字體看 OFL（SIL Open Font License）或 Apache 授權，這兩種通常允許商用與網頁嵌入；付費字體則依各字體官網的授權條款，商用免費素材、免費圖示資源的授權觀念在這裡完全適用，免費不等於可以隨便商用，付費也不一定包含網頁使用授權。關於這條授權紅線，下面專門有一節展開。
中文字體的盲區與三層補強
Fonts Ninja 對英文字體辨識準確度高，但中文字體因字型檔龐大、常被拆成子集或使用 Web Font 動態載入，辨識準確率明顯下降，有時只會回報通用字體家族名稱。這個中文盲區是結構性的：中文字型檔動輒數 MB，網站為了載入速度，常做子集化（subset，只保留頁面用到的字）或動態載入（用到的字才下載），導致擴充功能讀到的不是完整字體名稱，而是被裁切過的片段或通用 fallback 名稱。這也是為什麼同一個工具抓英文字體很準、抓中文字體卻常常讓人失望。這類由 JavaScript 動態載入的內容，JavaScript SEO 的處理原則也適用：等渲染完再讀，才看得到真實套用的字體。
遇到中文字體抓不到，三層補強流程比單靠任何一個工具都可靠，而三者的擅長領域要分清楚。最快的第一手是 Elements 面板裡的 computed style：對目標文字檢查 font-family，看到實際套用的字體清單，缺點是容易被 fallback 名稱誤導，回傳的常常是 sans-serif 這種通用值。最準的是 Network 面板：按 F12 → Network → 篩選 Font，重新整理頁面，直接看網站實際載入的 .woff／.woff2 檔名，檔名往往就藏著字體的真名，但門檻最高，要看得懂檔名與請求順序。讀不出來才動用截圖以圖搜字：用 WhatTheFont（MyFonts）或求字網比對字體資料庫，這一步對完全讀不到名稱的子集化字體特別有用，但對同一字體家族的不同字重容易猜錯。
- computed style 抓第一手名稱：在 Elements 面板對目標文字檢查 computed style 的 font-family，看到實際套用的字體清單。
- Network 面板驗證檔名：按 F12 → Network 面板 → 篩選 Font，重新整理頁面，看實際載入的 .woff／.woff2 檔名對不對得上。
- 以圖搜字兜底：截圖後用 WhatTheFont（MyFonts）或求字網比對，應付完全讀不到名稱的子集化字體。
建議的實戰組合其實很簡潔：英文用 Fonts Ninja 即可，中文走 Fonts Ninja 初判＋開發者工具驗證＋以圖搜字兜底的三層流程。對中文字體有更系統化需求的話，可以再搭配中文字體設計與字體推薦清單來比對。Fonts Ninja 對中文字體是初判工具，不是終審工具，把這句記下來，會少走很多冤枉路。
中文字體的授權也常比英文複雜，開源中文字型（如思源系列）授權相對單純，商用委託字型則幾乎都需要逐一購買授權。這部分的選字邏輯與Logo 標準字的字體挑選是同一套思路。
Fonts Ninja vs WhatFont vs Fount：字體查詢工具比較
市面上三款主流字體查詢擴充功能定位不同。WhatFont 輕量、只報字體名稱與基本樣式，適合偶爾查一下；Fount 同樣走極簡路線，游標懸停報名字；Fonts Ninja 資訊最完整，連字級、行距、顏色、下載連結與即時預覽都有，適合需要完整取樣與採購的設計師。要深度取樣選 Fonts Ninja，只是想知道字名選 WhatFont 即可。
| 比較項目 | Fonts Ninja | WhatFont | Fount |
|---|---|---|---|
| 字體名稱辨識 | 有 | 有 | 有 |
| 字級 font-size | 有 | 部分 | 無 |
| 行距 line-height | 有 | 部分 | 無 |
| 字距 letter-spacing | 有 | 無 | 無 |
| 顏色色碼 | 有 | 有 | 無 |
| 即時預覽換字體 | 有 | 無 | 無 |
| 下載／購買連結 | 有 | 無 | 無 |
| 收藏清單 | 有 | 無 | 無 |
| 適合對象 | 設計師深度取樣 | 快速確認字名 | 極簡報名字 |
從這張表看得很清楚：只查名字的話，WhatFont 或 Fount 都夠用，而且更輕、更不干擾瀏覽；但要重建排版樣貌、找下載點、還想在頁面上試換預覽，就只有 Fonts Ninja 一條路。對技術使用者來說還有第三條路：直接用瀏覽器開發者工具的 Network 面板看字型檔，這是最原始、免安裝的方式，缺點是讀不到字級、行距、顏色這些設計參數。完整的流程往往是兩者併用：擴充功能抓設計參數，開發者工具驗證字型檔真名。如果你常做UI 原型設計或在 Figma、Canva 裡還原參考網站的排版，這套組合會讓取樣效率翻倍。
查到字體之後，怎麼合法搬到自己網站
查到字體名稱只是第一步，要搬到自己網站須依序確認三件事：該字體是否允許網頁使用與商用、取得合法授權或免費字型檔、再透過 @font-face 或 Google Fonts 等方式載入 [來源：〈Google Fonts〉〈https://fonts.google.com〉〈2026〉]。免費開源字體優先選 OFL 授權，付費字體務必購買對應的 Web Font 授權，否則把付費字體直接搬上網站會構成侵權。而字型檔通常託管在某個網址下，理解網址的組成結構有助於正確設定 @font-face 的 src 路徑。
- 第 1 步確認授權：到字體官網或 Google Fonts 查授權條款，OFL（SIL Open Font License）與 Apache 授權通常允許商用與網頁嵌入，這是最安全的一類。
- 第 2 步取得字型檔：開源字體可直接下載.woff2，付費字體需購買 Web Font 授權，注意桌面版授權通常不含網頁使用，這是新手最常買錯的地方。
- 第 3 步載入網站：用 @font-face 自行託管，或透過 Google Fonts、Adobe Fonts 的 CDN 引入；WordPress 亦可透過外掛或本機託管加速。
這三步缺一不可，跳過任何一步都會留下隱患。最常見的錯是第 2 步：以為買了字體的桌面授權就能用在網站上，結果只買到設計軟體裡使用的權利，網頁嵌入屬於另一種授權範圍。授權還分「頁面流量上限」「可嵌入網域數量」這類條件，流量大的網站或一次部署在多個子網域的話，這些條件都要先比對過，免得日後被字體商追討差價。
效能這關也要過。中文字型檔大，建議做子集化或本機託管，避免拖慢網站速度反而傷 SEO。一個載入要等三秒的字體，再好看也會把訪客與搜尋引擎一起嚇跑，這跟網站速度優化、Core Web Vitals是同一條效能戰線。字體檔案是常見的最大內容繪製（LCP）元兇之一，大型裝飾字體或網頁字型載入過慢會直接拖累 LCP 分數；以一份被廣泛引用的 web.dev 案例為例，電信商 Vodafone 將 LCP 改善 31% 後，銷售提升了 8%，可見字體載入與頁面速度直接牽動轉換 [來源：〈web.dev (Google) - Why does speed matter?〉〈https://web.dev/articles/why-speed-matters〉〈2026〉]。要驗證載入後的頁面有沒有被搜尋引擎正確讀取，可以透過Google Search Console來檢查索引狀態。
以這類把中文字型整包未子集化就搬上線的內容站為例，常見的狀況是：一個原本 LCP 約落在 2.5 到 3.5 秒的頁面，掛上完整中文字型檔後，LCP 會被往上推到大約 4 到 6 秒，字型檔本身的下載量依典型表現幅度約落在 3 到 8 MB 之間。這個數字反映的是「把桌面版字型檔直接當網頁字型用」這個新手最常犯的錯。把同樣的字型檔拆成僅含常用字的子集後，單一頁面實際下載量常能壓到 200 到 500 KB 這一級，LCP 也多半能回到原本的區間，這正是子集化或動態載入的價值所在。決策角度很明確：只要內文是中文，就該先做子集化或動態載入，把字型檔壓到數百 KB 等級，避免整包丟上去讓瀏覽器自己消化。
實務上要誠實提醒這條路的兩個失敗面。其一是子集化遇到字數涵蓋不足時，沒被收進子集的字會 fallback 到系統字，畫面上會出現同一段文字兩種字體交雜的不協調感，這時取樣再漂亮也救不回閱讀體驗，所以子集的字表涵蓋範圍得跟實際頁面用字對齊，光壓檔案大小而不顧涵蓋範圍反而會出問題。其二是動態載入（用到的字才下載）雖然能把首屏檔案壓到最小，但常依賴 JavaScript 在渲染後才注入字型，這會讓文字經歷「系統字先出現、再跳換成目標字體」的閃爍（FOUT），讀者體驗與 LCP 的取捨在這裡會再次浮現，需要在「檔案小但可能閃爍」與「檔案大但一次到位」之間依頁面類型挑選。實務上常見的折衷是把 font-display 設成 swap：先用系統字把文字內容盡早顯示出來，字型下載完再替換，這樣 LCP 不會被字型檔卡住，閃爍也只是短暫過渡，對以閱讀為主的內容頁通常是可接受的代價；但若是品牌首頁、登入頁這類「字體本身就是視覺重點」的頁面，設計師往往寧可多等零點幾秒也要讓字體一次到位，避免品牌辨識度在首屏被打折。這類判斷沒有標準答案，只能依頁面性質與字體在版面裡的權重逐頁決定。要驗證子集化或動態載入到底有沒有把 LCP 拉回來，最直接的方式是改完後跑一次實測：在瀏覽器開發者工具的 Performance 或 Lighthouse 面板看 LCP 數值與字型請求的阻塞時間，把「子集化前」與「子集化後」兩次的數字擺在一起比，降幅多少一目了然，這比憑感覺判斷「好像變快了」可靠得多，也才能確認子集的字表涵蓋範圍與字型檔大小兩個目標都同時達成。
排版還原是最後一哩。把 Fonts Ninja 抄到的字級、行距、字距、顏色套進 CSS，才能真正重現原網站的視覺質感；知道字體叫什麼，跟做出一樣好看的版面，中間隔的就是這四個參數有沒有精準套上去。這部分的細節與CSS Box Model、SASS、響應式網頁設計息息相關，字型檔透過 HTTPS 傳輸才能避免混載與被攔截，相關觀念可參考HTTPS 與網站安全。
把整條鏈路串起來看：辨識（Fonts Ninja）→ 驗證（開發者工具，特別是中文字體）→ 授權（OFL 或 Web Font 授權）→ 載入（@font-face 或 CDN）→ 還原（字級行距字距顏色套進 CSS）→ 加速（子集化與本機託管）。每一環都有對應的工具與知識，缺任何一環成果都會打折扣，這也是前面反覆強調 Fonts Ninja 是入口、不是終點的原因。這條鏈路跟一般網頁設計流程接在一起，字體只是其中一環，旁邊還有版面、色彩、效能各自要顧。
要在哪個平台落地，差異其實不小：用Elementor、Divi 這類頁面編輯器時，自訂字體多半要透過主題內建的字體上傳掛上去；走WordPress 佈景主題則要看主題本身支不支援本機字型。預算有限的話，把字體授權費放進網站架設費用一起算，才不會買到一半發現超支。想找更多取樣對象，可以翻翻設計靈感網站與網頁設計趨勢，看到喜歡的版面，啟用 Fonts Ninja，字體與參數就到手了。
把取樣結果整理成設計 Token：從抄到複用
取樣最怕的不是抓不到參數，而是抓了一堆卻散落在記事本、聊天軟體、截圖資料夾裡，要做下一個專案時完全找不到。要讓取樣真正變成可重複利用的資產，關鍵是把它整理成一份設計文件，用固定的欄位記錄，久而久之就會累積出屬於自己的排版參考庫。
建議的欄位結構很單純，每一筆取樣至少記下這幾欄：字體家族名稱、字重、font-size、line-height、letter-spacing、color 色碼、用途（主標／副標／內文／按鈕）、來源網站、授權類型。來源網站這欄特別重要，它讓你日後能回頭驗證參數有沒有記錯，也方便把同一個網站的不同層級取樣串在一起看。
| 欄位 | 範例值 | 用途 |
|---|---|---|
| 字體家族 | SF Pro Display | 主標展示字體 |
| 字重 | 600 | 控制視覺重量 |
| font-size | 48px | 標題字級 |
| line-height | 1.1 | 標題緊湊行距 |
| letter-spacing | -0.02em | 大字級收緊字距 |
| color | #1d1d1f | 近黑高對比文字色 |
| 用途 | 主標 | 標註套用位置 |
| 來源網站 | apple.com | 日後回頭驗證 |
| 授權類型 | 專屬／不可商用 | 決定能否直接搬用 |
把欄位固定下來之後，取樣的動作會變得有節奏：懸停、點開面板、把六個數值抄進對應欄位、補上用途與來源。這套流程跑順之後，一次完整取樣大約十秒，卻能把一個好看的版面永久收進你的設計資料庫。比起到處截圖、事後憑記憶拼湊，這種結構化記錄的回收期短得驚人。
要注意的是「授權類型」這欄，它直接決定這筆取樣能不能照搬。即便是 Apple 這種把自家字體用得極漂亮的網站，它的專屬字體通常不能商用，這時取樣的價值在於「參數配置可以學，字體要換成同類型的開源替代品」。換句話說，設計文件裡要分兩類：可直接商用抄用的，與只能學參數、字體要替換的。混在一起，日後很容易誤用侵權字體而不自覺。
進階一點的做法，是把整份設計文件轉成 CSS 變數或設計 token，直接餵給開發流程。把 font-size、line-height、letter-spacing、color 對應成 --font-size-h1、--line-height-tight 這類變數，設計與開發就能共用同一組來源，往後改版只要改一處。這個做法與SASS的變數管理、CSS Box Model的尺度觀念完全接軌，是把取樣成果推進到生產環境的最後一步。
Fonts Ninja 不適用的五種情境
Fonts Ninja 很強，但並非每種取樣情境都適合它，把它當成唯一工具反而在某些場景裡浪費時間。下面幾種情況，改用別的方法會更有效率。
- 純文字截圖、沒有網頁可懸停：手上只有一張圖片、一張海報或一段影片截圖時，Fonts Ninja 完全派不上用場，因為它依賴網頁 DOM 才能讀到字體資訊。這時直接走以圖搜字（WhatTheFont、求字網）才對。
- 高度子集化的中文字體：網站只載入了頁面用到的少數中文字，computed style 回傳的常是 sans-serif 這種 fallback 名稱，Fonts Ninja 在這裡只會給出不可靠的答案，直接跳到開發者工具 Network 面板看檔名會更快。
- 只要快速確認字名、不需要參數：純粹想知道「這是什麼字」，WhatFont 更輕量、更不干擾瀏覽，開 Fonts Ninja 反而過重。
- 受登入或反爬蟲保護的頁面：某些會員專屬頁面或反爬蟲機制較強的網站，擴充功能的懸停感應可能失效，這時得靠開發者工具手動翻原始碼，或先截圖再以圖搜字。
- 需要批次比對大量網站的字體策略：要一次分析幾十個競品網站的字體使用，單靠手動懸停效率太低，這屬於結構化爬取的範疇，已經超出瀏覽器擴充功能的設計目的。
把這些例外記下來，可以避免把工具用在它不擅長的地方而誤判它的能力。Fonts Ninja 的強項是「在可正常渲染的公開網頁上，快速取得字體名稱與完整排版參數」，離開這個範圍，它就要交棒給開發者工具或以圖搜字服務。把工具的邊界畫清楚，取樣的成功率才會穩定。
Fonts Ninja 常見問題
下面把讀者最常問、且正文沒有直接講透的問題集中回答。
查到字體名稱後去哪下載？可以商用嗎？
Fonts Ninja 面板會直接給開源下載或付費購買連結。開源字體看 OFL 或 Apache 授權，通常可商用；付費字體須購買 Web Font 授權才能用在網頁上，桌面版授權通常不含網頁使用，這是新手最常買錯的授權範圍。
Fonts Ninja 支援哪些瀏覽器？
支援主流的 Chrome、Firefox、Edge 等瀏覽器，到對應的擴充功能商店搜尋即可安裝。建議釘選到工具列，方便隨時啟用。
手上只有一張字體截圖，能用 Fonts Ninja 嗎？
不行。Fonts Ninja 依賴網頁 DOM 來讀字體資訊，沒有可懸停的網頁就無法運作。截圖請改用 WhatTheFont 或求字網這類以圖搜字服務，把圖片上傳後由服務比對字體資料庫給出候選答案。
取樣回來的參數要怎麼整理才不會亂掉？
用固定欄位記錄每一筆取樣：字體家族、字重、font-size、line-height、letter-spacing、color、用途、來源網站、授權類型。把欄位固定下來，久而久之就會累積成可複用的排版參考庫，比散落在截圖與記事本裡好找得多。
授權裡的「頁面流量上限」「可嵌入網域數量」是什麼意思？
付費字體的 Web Font 授權常附帶這類條件：頁面流量超過門檻、或一次部署在多個子網域時，要額外加購或換更高等級的授權。流量大的網站或有多個子站的品牌，買之前要先比對自家流量與網域數量，免得日後被字體商追討差價。
回顧一下整篇的核心：Fonts Ninja 真正省事的地方，是游標懸停那一瞬間，名字、字級、行距、字距、顏色、下載連結通通攤在同一個浮窗裡，不用再開第二個工具；中文字體是它的短板，得靠開發者工具加以圖搜字補上；而查到名字其實只走完三分之一，後面確認授權、拿到字型檔、正確載入並把參數套回 CSS，才算真的把別人的字體設計搬進自己網站。把取樣結果整理成設計文件、畫清工具的適用邊界，這套工具組合才會從「偶爾用一下」變成你日常設計流程裡真正省時間的一環。