title: 網頁字型/字體分析工具「WhatFont」（Chrome） --- **摘要** 看到別人網頁用的字型很特別，但卻不知道究竟是什麼字型嗎？對於專業的人來說，直接透過網頁的 CSS 樣式表就能得知，不過在怎麼快還是沒有「WhatFont」來得好用。 「WhatFont」一款 Chrome 的網頁字型分析工具，啟動後將滑鼠游標移到網頁文字上就能立刻看到該文字所使用的字型和樣式，不用大費周章的看CSS，只要一個 move（動滑鼠）就能自動分析，而且還能同時查看多個不同文字樣式的資訊，可說是網頁設計必備的工具唷！ **Category** - [Chrome](https://www.soft4fun.net/category/software/internet/chrome-browsing) - [網路相關](https://www.soft4fun.net/category/software/internet) **Tag** - [chrome擴充套件](https://www.soft4fun.net/tag/chrome%e6%93%b4%e5%85%85%e5%a5%97%e4%bb%b6) - [字型偵測](https://www.soft4fun.net/tag/%e5%ad%97%e5%9e%8b%e5%81%b5%e6%b8%ac) - [字型查詢](https://www.soft4fun.net/tag/%e5%ad%97%e5%9e%8b%e6%9f%a5%e8%a9%a2) - [字體偵測](https://www.soft4fun.net/tag/%e5%ad%97%e9%ab%94%e5%81%b5%e6%b8%ac) - [網站字型分析](https://www.soft4fun.net/tag/%e7%b6%b2%e7%ab%99%e5%ad%97%e5%9e%8b%e5%88%86%e6%9e%90) - [網頁字型分析](https://www.soft4fun.net/tag/%e7%b6%b2%e9%a0%81%e5%ad%97%e5%9e%8b%e5%88%86%e6%9e%90) - [網頁字體分析](https://www.soft4fun.net/tag/%e7%b6%b2%e9%a0%81%e5%ad%97%e9%ab%94%e5%88%86%e6%9e%90) - [網頁字體查詢](https://www.soft4fun.net/tag/%e7%b6%b2%e9%a0%81%e5%ad%97%e9%ab%94%e6%9f%a5%e8%a9%a2) **圖片清單** - ![網頁字型/字體分析工具「WhatFont」（Chrome） _wahtfont-01](http://pic.soft4fun.net/imgs/WhatFont_F71A/_wahtfont-01.png "網頁字型/字體分析工具「WhatFont」（Chrome） _wahtfont-01") - ![網頁字型/字體分析工具「WhatFont」（Chrome） _wahtfont-02](http://pic.soft4fun.net/imgs/WhatFont_F71A/_wahtfont-02.png "網頁字型/字體分析工具「WhatFont」（Chrome） _wahtfont-02") - ![網頁字型/字體分析工具「WhatFont」（Chrome） _wahtfont-03](http://pic.soft4fun.net/imgs/WhatFont_F71A/_wahtfont-03.png "網頁字型/字體分析工具「WhatFont」（Chrome） _wahtfont-03") - ![網頁字型/字體分析工具「WhatFont」（Chrome） _wahtfont-04](http://pic.soft4fun.net/imgs/WhatFont_F71A/_wahtfont-04.png "網頁字型/字體分析工具「WhatFont」（Chrome） _wahtfont-04") - ![網頁字型/字體分析工具「WhatFont」（Chrome） _wahtfont-05](http://pic.soft4fun.net/imgs/WhatFont_F71A/_wahtfont-05.png "網頁字型/字體分析工具「WhatFont」（Chrome） _wahtfont-05") --- 看到別人網頁用的字型很特別，但卻不知道究竟是什麼字型嗎？對於專業的人來說，直接透過網頁的 CSS 樣式表就能得知，不過在怎麼快還是沒有「WhatFont」來得好用。 「**WhatFont**」一款 Chrome 的網頁字型分析工具，啟動後將滑鼠游標移到網頁文字上就能立刻看到該文字所使用的字型和樣式，不用大費周章的看CSS，只要一個 move（動滑鼠）就能自動分析，而且還能同時查看多個不同文字樣式的資訊，可說是網頁設計必備的工具唷！ > 套件名稱：**WhatFont** > 安裝頁面：[點這安裝 WhatFont](https://chrome.google.com/webstore/detail/jabopobgcpjmedljpbcaablpmlmfcogm) #### WhatFont 安裝方式 進入套件安裝畫面後按下「加到 Chrome」即可安裝。 ![網頁字型/字體分析工具「WhatFont」（Chrome） _wahtfont-01](http://pic.soft4fun.net/imgs/WhatFont_F71A/_wahtfont-01.png "網頁字型/字體分析工具「WhatFont」（Chrome） _wahtfont-01") #### WhatFont 使用方式 安裝完成後在瀏覽器右上角會看到「**WhatFont** 」的按鈕，要分析網站使用的字型時按下按鈕就能啟動分析功能。 ![網頁字型/字體分析工具「WhatFont」（Chrome） _wahtfont-02](http://pic.soft4fun.net/imgs/WhatFont_F71A/_wahtfont-02.png "網頁字型/字體分析工具「WhatFont」（Chrome） _wahtfont-02") 啟動功能之後，只要把滑鼠游標移到文字上就會出現該文字使用的字型，在文字或連結上點一下滑鼠左鍵會跳出一個固定視窗，裡面除了顯示文字的字體和樣式外，還有字體大小、字型預覽、顏色色碼…等等。 > ※ 啟動 WhatFont 時，頁面上的連結會自動失效，若要查看連結文字的完整樣式可以放心的點下去。 ![網頁字型/字體分析工具「WhatFont」（Chrome） _wahtfont-03](http://pic.soft4fun.net/imgs/WhatFont_F71A/_wahtfont-03.png "網頁字型/字體分析工具「WhatFont」（Chrome） _wahtfont-03") 可以一次查看多個文字樣式資訊。 ![網頁字型/字體分析工具「WhatFont」（Chrome） _wahtfont-04](http://pic.soft4fun.net/imgs/WhatFont_F71A/_wahtfont-04.png "網頁字型/字體分析工具「WhatFont」（Chrome） _wahtfont-04") #### 關閉 WhatFont 按下網頁右上角的「Exit WhatFont」就可以把字型分析功能關閉，回到一般瀏覽模式。 ![網頁字型/字體分析工具「WhatFont」（Chrome） _wahtfont-05](http://pic.soft4fun.net/imgs/WhatFont_F71A/_wahtfont-05.png "網頁字型/字體分析工具「WhatFont」（Chrome） _wahtfont-05")