Fonts Ninja 字體辨識教學：一秒找出網頁字型

逛到一個質感很好的網站，被那組標題字深深吸引，想在自己的作品裡用上同一套字體，卻完全不知道它叫什麼名字。你截圖問朋友、丟到社團求助，得到的答案十個人十一個不一樣，只好放棄，用回原本那套看膩的預設字。這是很多做設計、行銷或架站的人都踩過的坑。

本文要解決的就是這件事。接下來帶你認識 Fonts Ninja，並把「看到喜歡的字、識別出來、判斷能不能用、再裝到自己網站」這條路走一次。不只教你按哪個按鈕，也會說明字體背後的規格與授權。

重點摘述：Fonts Ninja 是一款網頁字體辨識工具，可顯示字體名稱與部分排版規格，並提供字體預覽或試用入口。實際支援平台、功能與方案可能調整，安裝前請以 Fonts Ninja 官方網站（2026）與擴充商店頁面為準。

為什麼你需要一個字體辨識工具

很多人第一個念頭是：「字體名稱不是開 F12 開發者工具就查得到嗎？」技術上沒錯。但實際打開 Chrome 的 DevTools，點到 Elements 面板，你看到的是一長串 CSS 規則：font-family 後面掛著一整串 fallback、font-weight 寫成數字、有時候字體還是透過 @font-face 動態載入，真正的字型檔藏在一個看不懂的網址裡。

講白了，DevTools 是給會讀 CSS 的人用的。對一個視覺設計師、內容企劃、或行銷窗口來說，那一整片程式碼根本是另一個語言。於是出現三種常見的下場：第一種是放棄查、隨便抓一個「長得像」的免費字體替代，結果質感整個走樣；第二種是截圖到社團問人，得到一堆憑感覺的猜測；第三種最危險，是直接把喜歡的字體名字記下來，去 Google 搜到下載連結就裝，完全沒注意到授權問題。

字體辨識工具的價值，就是把 DevTools 那一牆程式碼「翻譯」成人話。你不用懂 CSS，游標指過去它就告訴你這套字叫什麼、是哪一家出的、粗細多少、級距多大。這不是偷懶，這是讓專業知識變得可取得。

換個方式想。設計師看字體，其實跟廚師吃菜是一樣的。你吃到一道好吃的醬，專業廚師能拆解出裡面有什麼材料、比例大概是多少；一般人只覺得好吃，卻說不出個所以然。字體辨識工具就是你的味覺分析儀，幫你把「這個字好看」翻譯成「這是 GT Sectra，Regular，字級 36px，行高 1.2」。

字體辨識最常被需要的四種情境

• 品牌官網重做：業主丟一個參考網站給你，說「我要這種感覺」，你得先拆解出對方用了哪些字體，才能評估能不能重現或需要替換。
• 設計靈感收集：日常逛網站、看國外案例，看到喜歡的排版會想建檔，但沒有字體名稱的靈感庫等於沒有索引。
• 接案報價與素材盤點：客戶指定要某套付費字體，你得先確認是哪一套、授權怎麼算，才能把字體採購費用寫進報價單。
• 網站改版的字體稽核：接手一個老網站，第一件事是搞清楚它現在到底用了幾套字、哪些是免費、哪些是授權到期的高風險地雷。

這四種情境在實務上都很常見。尤其是第四種，很多人不知道，一個經營了五年的網站，字體往往是歷年不同工讀生、不同接案者各裝各的留下來的遺跡，不清一次根本不知道自己站在什麼基礎上。

Fonts Ninja 究竟是什麼樣的工具

Fonts Ninja 是以瀏覽器工具為核心的字體辨識服務，可用來查看網頁文字採用的字體與排版資訊，部分頁面也提供試用或購買字體的入口。支援的瀏覽器、桌面工具與其他整合可能調整，請以 Fonts Ninja 官方網站（2026）與對應商店頁為準。

它的價值不只在顯示 CSS 宣告，也在於把辨識結果連到字體資訊、試用或購買入口。能否下載試用、建立清單或串接其他工具，要看當下版本與字體授權；工具提供連結，不等於你已取得商用權。

如果只是偶爾查某個網站用了什麼字，瀏覽器開發者工具或免費辨識工具通常就夠。若要頻繁整理字體規格與測試搭配，再依官方目前提供的功能與價格評估是否值得付費。

三個你會反覆使用的核心功能

功能	實際能幫你做什麼	誰最需要
即時懸停辨識	游標移到任何文字上，浮動標籤立刻顯示字體名稱與粗細，不用點擊	需要快速掃過整頁、大量收集字體靈感的人
完整字體規格卡	點下文字後展開面板，列出 font-family、weight、size、line-height、letter-spacing、color 等全部數值	要交付規格書給前端、或精準重現排版的設計師
網頁即時換字預覽	把目前網頁的字體替換成其他字型，直接看到換字後的視覺效果	正在評估替代字體、做 A/B 字體提案的人

這三個功能看似各自獨立，串起來其實是一個完整的工作鏈：先辨識、再記錄規格、接著試驗替換。一個設計師在實際專案裡反覆執行的，差不多就是這三個動作的循環。

從安裝到第一次使用，三分鐘上手

廢話不多說，直接走一次完整流程。這裡以 Chrome 示範，其他瀏覽器步驟幾乎一樣。

1. 到官方擴充商店安裝：打開 Chrome 線上應用程式商店，搜尋「Fonts Ninja」，點安裝。裝完後工具列會出現一個小圖示，建議釘選起來比較好點。
2. 依畫面提示登入：若目前版本要求帳號，再依官方流程註冊；不要假設登入或同步功能在每個版本都相同。
3. 打開任何一個你想觀察的網站：注意，因為隱私與同源政策，某些銀行、後台、登入後的頁面擴充功能會被擋。一般公開網站都正常。
4. 點工具列上的 Fonts Ninja 圖示啟用：啟用後游標會變成辨識模式，這時候把滑鼠移到網頁上的任何文字，旁邊就會浮出一個小標籤顯示字體名稱與粗細。
5. 點一下文字展開規格卡：小標籤只是快速預覽，真正完整的資訊要點下去才會展開。規格卡裡會列出這個字的所有 CSS 數值，這是你要交付給前端工程師時最關鍵的資料。

到這裡已經掌握基本辨識流程。收藏、試用與其他整合是否可用，請依當下版本與字體授權確認。

一個小提醒：啟用辨識模式時，因為它在網頁上插入了一層互動覆蓋層，有時候會擋到原本的點擊。觀察完記得點一下工具列圖示關閉模式，讓網頁恢復正常操作。這個小習慣可以幫你少踩很多「為什麼按鈕突然不能按」的困惑。

看懂 Fonts Ninja 的字體規格卡

多數教學停在「它會告訴你字體名字」就結束了。但真正有價值的，是那張規格卡上其他幾個欄位。一個設計師跟一個只會按按鈕的人，差別就在於能不能讀懂那排數字背後的意思。這一節把每個欄位拆開來講。

font-family：字體名稱背後的 fallback 邏輯

規格卡上最顯眼的是字體名稱。但你會發現，有時候顯示出來的會是一整串，例如 Inter, system-ui, sans-serif。這串東西叫 fallback chain，翻成白話就是「優先順序清單」：瀏覽器會從第一個開始找，找不到就往下退一個繼續找。

這個細節很重要。字體辨識工具可能顯示 CSS 宣告或計算後樣式，但實際繪製字體仍可能受字型檔是否成功載入、字元覆蓋範圍與 fallback 影響。要做嚴謹的字體稽核，還要搭配 DevTools 的 rendered fonts 或 Network 面板確認。

font-weight：400 跟 normal 是同一件事

字體粗細在 CSS 裡可以用數字（100 到 900）或關鍵字（normal、bold）表示。400 通常對應 normal，700 通常對應 bold；300、500、600 等中間值可能來自靜態字重、可變字體，也可能由瀏覽器合成。只看數字，不能判定網站買了完整字體家族。

要重現 500 或 600 的視覺，應確認實際字型檔是否提供該字重，避免瀏覽器用合成粗體代替。替代字體不只要比名稱，也要比較字面寬度、x-height、字重與行距。

font-size 與 line-height：決定閱讀舒適度的雙胞胎

字級好懂，行高則是很多人放過的隱藏魔王。line-height 沒有絕對標準，但長篇文章的舒適區大概落在字級的 1.5 到 1.7 倍。Fonts Ninja 通常會同時給你這兩個數字，你可以快速算一下比例。如果一個網站的標題字級是 42px、行高是 46px（大約 1.1 倍），這是刻意壓緊的標題排版；如果是內文字級 18px、行高 30px（大約 1.67 倍），這是體貼長文閱讀的設定。

把這個比例算出來，你就抓到了這個網站排版的呼吸節奏。這比單純抄一個字體名字有用太多了。排版好不好看，字體只佔三成，剩下七成是級距、行高、字距這些結構性決定。如果你想更系統性地搞懂這些，可以回頭參考站上的排版設計實戰技巧，那篇把行距與視覺層次的關係講得更完整。

letter-spacing：精品網站跟業餘網站的分水嶺

字距是最容易被新手忽略、卻最能瞬間拉開質感差距的設定。英文標題常見的做法是「大字配負字距」，把字母稍微擠在一起，營造高級感；中文因為方塊字的特性，字距調整邏輯完全不同，通常是在標點與標題做微調。當你在 Fonts Ninja 規格卡上看到 letter-spacing: -0.02em 這種微負值，幾乎可以肯定是設計過的版面，不是預設值。

color 與對比：質感之外的合規問題

規格卡上還有一個常被略過的欄位：color。多數人只把它當成配色參考，但文字顏色跟背景之間的對比度，其實是無障礙設計的硬指標。WCAG 2.1 AA 標準要求正常文字的對比比至少 4.5:1，大字標題至少 3:1。很多看起來很有氣質的淺灰字配白底，對比度其實只有 2 點多，對視力較弱的使用者或在陽光下的手機螢幕來說幾乎讀不出來。當你用 Fonts Ninja 把一個網站的文字色與背景色抄下來，順手用任何一個線上對比檢測工具算一下比值，就能判斷這個網站的排版是「好看但不及格」還是「好看又合規」。把這個習慣養起來，你交出去的設計就不會在無障礙審查那一刻翻車。

Fonts Ninja 的隱藏武器：直接在網頁上試穿字體

這個功能可說是整套工具裡最被低估的。前面講的辨識、規格卡，本質上都是「觀察」。但試穿功能讓 Fonts Ninja 從觀察工具升級成設計工具。

具體怎麼用？當你打開規格卡，旁邊會有一個區域列出建議的替換字體，通常是來自 Google Fonts（2026）或其他開源字體庫。你點任何一個，整個網頁的字體會立刻換成那套，讓你直接看到「如果這個網站改用 Noto Sans TC 會長什麼樣子」。

這個能力在兩種情境下特別好用。第一種是提案階段：你要說服業主換字體，與其開簡報講道理，不如直接把他現在的網站切換成你推薦的字體讓他看，說服力差十倍。第二種是平價替代評估：你看到一個網站用了某套昂貴的付費字體，想知道有沒有免費的近似方案，就反覆切換不同的開源字體比對，往往能找到八九成像的替代品。

以一個室內設計工作室的品牌網站為例，業主可能很喜歡某個北歐家具品牌的標題字，但那套字體是付費專屬、不能商用。這類專案最花時間的環節，往往就是用試穿功能反覆比對十幾套開源襯線字，找出質感最接近、又能合法使用的那一套，再把它包成一份完整的視覺規範交給業主。如果沒有這個即時預覽能力，過程大概會變成在 Photoshop 裡手動改字體截圖幾十次的噩夢。

附帶一提，這個試穿功能也讓人重新思考字體選擇的本質。很多時候業主執著於「我要那一套字」，其實要的是那套字帶來的「那種感覺」。當你能在三分鐘內展示五個近似替代方案，討論就會從「買不買得起」變成「哪一個最對味」，整個決策品質完全不一樣。挑字體這件事，背後牽涉到品牌個性、可讀性、跨語系一致性，在Logo 標準字設計那篇有更深的討論。

免費版能做什麼，付費版又多給你什麼

Fonts Ninja 的功能、試用與價格可能調整，這裡不把特定方案寫成固定承諾。評估時請直接查看官方目前的方案頁、擴充商店說明與你要使用的字體授權。

先用目前可用的免費功能完成基本辨識，再確認缺少的是哪一項能力。若只是查看 font-family、字重與尺寸，DevTools 也能交叉驗證，不必為了不會使用的進階功能付費。

如果官方方案提供字體試用、清單管理或跨工具整合，再評估它是否真的縮短你的提案流程。試用字體只代表可在限定條件下評估，不代表取得網站嵌入、Logo、App 或商業專案的完整授權。

判斷方式很簡單：先記錄它實際省下多少搜尋、試排與交付時間，再和當下價格比較。如果只是偶爾好奇，免費工具通常已足夠；工具是手段，合法字體與可維護的規範才是資產。

字體授權的陷阱：能辨識，不代表你能商用

這是最值得大聲提醒的一節，也是一般 Fonts Ninja 教學幾乎不會碰的地雷區。

字體辨識工具幫你找到名字，名字帶你找到下載連結，下載連結背後的授權條款，才是真正決定你能不能用的關鍵。一個常見的悲劇是：設計師用 Fonts Ninja 查到一個漂亮的標題字，搜尋找到一個看起來很正式的下載站，裝上去做完一整個商業專案，半年後收到字體公司的侵權存證信函，才知道那是一套個人免費、商業授權要價上萬的付費字體，而下載站根本是盜版。

字體授權大致可以分成幾類，下面用一張表把常見的地雷講清楚：

授權類型	能做什麼	常見地雷
開源（SIL OFL）	通常允許商業用途、修改與再散布	仍須遵守保留授權、保留字體名稱等條件
Google Fonts	收錄字體皆為開源，可用於商業與非商業用途	仍要查看各字體附帶的 OFL、Apache 或 Ubuntu Font License 條款
個人免費	僅個人非商業用途	裝到商業網站就是侵權，是最常見的踩雷點
付費商業授權	依授權範圍（網域、頁面瀏覽量、裝置數）付費使用	授權範圍算錯，網站流量成長後超額違約
網頁字型訂閱	按月或按瀏覽量付費，用 CDN 動態載入	停止續約後字體消失，網站瞬間走樣

下面用一個判斷流程幫你避險。查到字體名稱後，不要直接搜下載，而是先到字體公司的官網找授權頁。看到「Free for personal use」這幾個字，對商業專案來說就等於不能用，不要賭。看到 OFL 或 Apache 授權，基本安全，但還是花兩分鐘讀一下授權全文確認沒有附加條款。如果是付費字體，把你要用的範圍（幾個網域、預估流量、是否做動態子集）寫清楚去詢價，比事後被追討便宜太多。

中文世界的授權更複雜，因為中文字型動輒上萬字，開發成本高，完全免費可商用的選擇相對有限。如果你正在找合法的中文字體，站上整理了一份中文字體設計指南，裡面把可商用的黑體、明體、圓體、手寫體都標清楚授權來源，可以直接拿來當採購清單。

Fonts Ninja 跟其他字體辨識工具的比較

市面上字體辨識工具不少，下面挑四個最常被拿來跟 Fonts Ninja 比的，用一張表把各自定位講清楚。沒有絕對的好壞，只有適不適合你的工作習慣。

工具	形式	強項	弱項
Fonts Ninja	瀏覽器工具；其他整合依現行版本	字體辨識、規格資訊與試用入口	功能與方案須看官方當下說明
WhatFont	瀏覽器擴充	極簡、零學習成本、完全免費	只給基本資訊，沒有試穿、沒有清單管理
Fount	瀏覽器書籤小工具	不用安裝、點書籤即用	資訊最少、多年未更新、體驗較陽春
Chrome DevTools	瀏覽器內建	免安裝、能看到所有 computed style	需要會讀 CSS、資訊雜訊多、對非技術人不友善

這裡的建議是這樣。如果你是設計師、會頻繁做字體參考與提案，可以考慮 Fonts Ninja；試穿功能與規格卡有助於整理提案。如果你只是偶爾好奇某個網站用了什麼字、不想裝擴充，WhatFont 或 Fount 就夠了。如果你是前端工程師、本來就天天開 DevTools，內建工具通常已能完成辨識；Fonts Ninja 的額外價值，是讓你與設計師用同一套規格資訊溝通。

這些工具背後的原理都一樣：讀取瀏覽器計算後的 computed style。所以辨識準確度差異不大，真正的差別在於「辨識之後還能做什麼」。這也是反覆要強調的一點，選工具不要只看核心功能，要看它能不能融入你完整的工作流程。

有一個進階玩法值得提。這幾款工具其實可以串著用，不一定要從一而終。實務上習慣把 Fonts Ninja 當主力，負責日常辨識與規格記錄；遇到文字其實是圖片、或頁面被鎖死擴充功能讀不到的情況，再臨時開 WhatTheFont 這類以圖片辨識為主的服務接手。把文字型與圖片型兩種辨識邏輯備齊，你就能應付九成以上的字體追查需求，剩下那一成查不到的，往往本來就是客製字體或品牌專屬字，本來就無從複製。

字體辨識工具會失手的五種情況

工具再強也有極限。把這五種失事情境記起來，可以幫你少走冤枉路，也能讓你在客戶面前看起來像個真的懂的人。

一、文字其實是圖片

有些網站的標題看起來像文字，實際上是 PNG 或 SVG 圖檔。Fonts Ninja 辨識的是 HTML 文字節點，對圖片裡的文字完全沒輒。遇到這種情況，你要改用的是像 WhatTheFont 這類以圖片辨識為核心的服務，上傳截圖讓它用視覺特徵比對字體。

二、可變字體（Variable Font）

可變字體把多個粗細、甚至字寬都打包進一個字型檔，透過 CSS 的 font-variation-settings 動態調整。Fonts Ninja 看到的 font-family 可能是一樣的，但實際視覺表現千變萬化。這種情況下，光知道字體名字不夠，你還得看 variation settings 的數值才能精準重現。

三、動態子集與字型託管服務

很多用 Adobe Fonts 或某些中文字型服務的網站，字型檔是透過 JavaScript 動態注入的子集（subset），只包含這個頁面實際用到的幾個字。Fonts Ninja 可能只讀到一個服務商的代稱，拿不到真正的字體名。這時候最可靠的做法是直接問網站擁有者，或從頁面的 <link> 與 CSS 裡的 @font-face 來源網址反推。

四、CSS偽裝的字距與變形

有些設計師會用 CSS transform 把字體斜切、或用 font-stretch 拉寬，製造出字體本身沒有的樣貌。你辨識到的字體名字是對的，但視覺效果其實是 CSS 後製的。重現時要把這些 transform 一起抄進去，否則怎麼調都不像。

五、中文字體的復合家族

中文字體常見的情況是一個家族底下包含多個字重，但 CSS 宣告的名字可能是家族名，而實際渲染的是其中一個字重。再加上中文 Web Font 常做子集化，同一個字體名在不同頁面可能載入的是不同的字元子集。辨識結果可以參考，但要精準落地，還是得回到字體公司的規格文件。

這五種極限背後有一個用意：建立一個觀念，工具是你的助手，不能取代你的判斷。辨識結果永遠要再過一次你自己專業判斷的濾網，這也是真人設計師不會被工具取代的原因。

字體選擇不只關乎好看，它正在影響你的網站速度

來到這一節，這裡把視角拉高一點，把字體跟 SEO 連起來講。這是一般字體辨識教學完全不會碰的角度，但它對實際營運網站的人超級重要。

每一套網頁字型都需要下載資源，中文字型因字元數多，完整字集可能達到數 MB。若同一頁載入多套、許多字重又沒有子集化，會增加傳輸與渲染負擔。速度主要影響使用者體驗；Google 的排名系統也會使用 Core Web Vitals 等網頁體驗訊號，但它們只是眾多訊號之一，不是單一、直接決定排名的因素（見 web.dev（Google）的〈Why does speed matter?〉，2026）。

這代表什麼？代表你用 Fonts Ninja 收集回來的漂亮字體清單，不能全部往網站上塞。你得做取捨：標題用一套、內文用一套、偶爾裝飾性字體用一套，頂多三套。多出來的，請忍痛刪掉，或用子集化只載入實際會用到的字元。

評估一個網站的字體健康度，可以看字型檔總大小、字型載入是否造成 FOUT／FOIT，以及 font-display 策略。字體若延後首屏文字繪製或造成版面位移，可能影響 LCP、CLS 與閱讀體驗，但不能直接把單一字型檔歸因為排名下滑。想深入了解這塊，可以看Core Web Vitals 完全攻略。

可先做幾個實際動作：網頁字型優先提供 WOFF2；中文字型依內容與更新方式評估子集化；只預載首屏確實會使用的關鍵字型，避免預載太多反而搶頻寬；再依品牌字體與版面位移風險選擇合適的 font-display 值。swap 很常用，但不是每個情境都必然最佳，仍要實測 FOUT、CLS 與首屏呈現。

這裡也帶出一個容易被忘記的事：字體辨識跟字體落地是兩件事。你用 Fonts Ninja 查到的字體再漂亮，如果沒有搭配上述的載入最佳化，裝上網站反而會把分數往下拉。一個負責任的設計師，在提案推薦字體的時候，應該同時把字型檔大小、是否需要子集、載入策略一起講清楚，讓業主知道這套字體的「完整成本」包含效能代價。這也是字體工作流要拉到包含落地階段的原因。

所以一個成熟的字體工作流程，不只是「選好看的字」，還要包含「讓字體載得快、載得穩」。字體網頁化是一門獨立的技術，牽涉到格式選擇（woff2 優先）、子集化、預載入提示、CDN 配置。完整的載入優化做法整理在網頁字體 Webfont 完全指南，如果想再往整體網站速度延伸，Core Web Vitals 實戰是下一步的參考。

設計師的 Fonts Ninja 實戰流程

前面講了這麼多功能與觀念，這一節把它們串成一條你明天就能照著走的實戰流程。這是一套在品牌專案裡反覆驗證過的工作方式，不是理論。

第一步：建立你的字體靈感庫

平常逛到喜歡的網站，習慣性開 Fonts Ninja 指一下標題字與內文字，把字體名稱、粗細、字級記進一個文件。累積下來，你會有一份屬於自己的字體參考資料庫。這份資料庫的價值在於，當你接到新專案、需要快速提案時，你能立刻從自己的庫裡撈出三四個方向，省下從零發想的摸索時間。

第二步：解構參考網站的字體系統

接到業主給的參考網站，別急著模仿。用 Fonts Ninja 把整個網站的字體系統拆解一遍：標題用什麼、副標用什麼、內文用什麼、按鈕用什麼、各個字級與行高的對應關係。把這些整理成一張字體規格表，你會發現一個質感好的網站，背後的字體系統通常高度一致，並非隨機拼湊。

第三步：評估落地可行性與授權

拆解完之後，逐一套回授權與效能兩個濾網。這套字能商用嗎？中文字型檔多大？需不需要做子集？付費授權成本業主能接受嗎？走完這一輪，你會得到一份「能用的字體清單」，把那些「看起來很美但落不了地」的選項先剔除掉。這個落差，就是專業設計師跟業餘玩家的分水嶺。

第四步：在 Figma 或瀏覽器裡做替代評估

如果參考字體不能商用或效能太差，用 Fonts Ninja 的試穿功能或 Figma 外掛，反覆比對替代方案。把前端、內文字、按鈕字三個層次分開測試，不要一次換全部，否則你會看不出單一變動的效果。

第五步：輸出字體規範交給前端

到這個收尾階段，把決定好的字體系統整理成一份規範文件，包含字體名稱、各層次的粗細、字級、行高、字距、fallback chain，以及 web font 的載入策略。這份文件就是你跟前端工程師之間的合約，寫得越清楚，來回修改的次數越少。

這五步走完，你就把 Fonts Ninja 從「好玩的小工具」升級成「支撐整個專業流程的基礎建設」。差別在於你怎麼用它，工具本身的強弱反而是次要。

現在就動手：把今天的靈感變成你網站的字體

下面是一個今天就能執行的四步行動方案。

1. 裝好 Fonts Ninja，挑三個你最喜歡的網站，用規格卡把它們的標題字、內文字、粗細、字級全部記錄下來。光是這一個動作，你就比九成只會憑感覺的設計師多了一份實證基礎。
2. 把記錄下來的字體逐一查授權，特別標注哪些是個人免費、哪些是 OFL 可商用、哪些是付費。這一步會救你未來不知道多少次侵權風險。
3. 用試穿功能在你自己的網站或作品集上測試兩套替代字體，截圖比較。親眼看到差異，你才會真正內化「字體選擇是可以測試的」這個觀念。
4. 把決定好的字體寫進網站，優先使用 WOFF2，依情境設定 font-display，再用 PageSpeed Insights 與真機檢查載入、版面位移和可讀性。

字體這件事，入門很淺，精通很深。一個網站的質感，有時候什麼都不用改，只把字體系統重新整理一遍，整個感覺就升級了。實務上可以這樣說，字體辨識工具表面上是「查名字」，本質上是「建立你對字體的系統性敏感度」。當你開始用數字與規格去理解字體，把「感覺不錯」放一邊，你就跨過了設計師的一個重要門檻。

如果你想從字體往外延伸，把整個網站的視覺系統一起打底，這幾篇是建議接著讀的：搞懂英文字體的選擇邏輯可以看精選英文字體推薦；想建立完整配色系統可以搭配網頁配色工具；要把字體放進整體網頁設計脈絡，網頁設計完整指南是那個大一點的框架。字體從來不是孤立的決定，它是你整個視覺語言的起點。

現在，打開你瀏覽器，裝上 Fonts Ninja，去逛一個你一直很喜歡的網站，看看它到底用了什麼字。你會發現，那種「原來是它啊」的頓悟時刻，是設計路上很純粹的快樂。