如何了解某一網頁上使用的是什麼字體、字型大小？

01-06

Update:

更容易的來了，我寫了個 Bookmarklet。按下該書籤，網頁上就會跟隨滑鼠出現 Tooltip，顯示當前所指的元素採用的字體。

詳見：

http://chengyinliu.com/whatfont.html

Update 2:

現已部分支持 IE。

另外也有 Chrome Extension 提供。

===============================================

裝 Firebug，或者用 Webkit 自帶的 Inspector。在需要查看的元素按右鍵，選 Inspect Element 可以看到這個元素的樣式信息。（可能需要勾選 Display inherit。）其中，font 或 font-* 包含了你要的信息

http://grab.by/8N4y

最方便的是用 WebKit 系瀏覽器的 Web Inspector，在任何一個 DOM 元素上點右鍵選擇就可以直接看到該元素的 CSS 屬性。或者 Firefox 下的 Firebug，Opera 和 IE 也有類似工具。

Chrome 瀏覽器/Safari 瀏覽器等 Webkit 內核瀏覽器

選中需要查詢字體信息的對象，然後點擊右鍵「審查元素」（Inspector）。在右側欄中的 Styles 里，font/font-family 等可以用來描述字體，font/font-size 等可以用來描述字型大小。審查元素器左下有個放大鏡，可以用它來選擇需要被查詢的網頁元素。
或者安裝擴展 Firebug Lite。使用方法類似審查元素。
這幾種工具都可以直接修改 CSS 樣式，你可以修改字體，並且即時看到效果。

Firefox 瀏覽器

安裝擴展 Firebug。http://getfirebug.com/ 使用方法類似審查元素。

IE 內核瀏覽器

有一些類似的方法，比如在線版的 Firebug，以及一些工具（如 IETester），但是不推薦；
推薦的方法是，換 Chrome/Firefox/Safari 再來研究。
小白一點的辦法，粘貼到 Word 里進行研究，不多說了。

臨時解決這個問題的話，我也推薦柳成蔭的小腳本。

1）用瀏覽器打開網頁，點擊這個 Fontface Ninja 的小插件▼

2）等待2-3秒鐘左右，會彈出一個小彈窗▼

該頁面使用的字體就都顯示在這裡了

3）滑鼠懸停在你想知道字型大小、顏色和字體的文字上▼

「紐約公交司機威廉·西米洛」這段文字使用了 Ping Fang SC Regular 字體，字型大小大小是 24px，文字顏色色值是：#000000

4）點擊一下有更多神奇的選項▼

如果該字體在這款插件的字體庫里還可以直接點擊紅色框的區域去下載
在 Type something... 的輸入框里可以隨便輸入文字進行字體效果預覽
底部可以調整字體大小、間距、顏色去調整預覽效果
點擊 Pangram 會隨機生成一段文字預覽

之前10步搞定的事情，我們三步搞定了！

那麼怎麼得到這個神器？

1）打開他們的官網

https://fontface.ninja/

2）點擊 Get it now！就可以了，它會根據你使用的瀏覽器自動跳轉到瀏覽器插件商店頁去下載

不過目前該插件僅支持 Chrome 和 Safari！

.........

如果你在用的時 360 瀏覽器或者獵豹瀏覽器、搜狗瀏覽器等......

裝個 Chrome 吧，看完下面的文章你會感受到 Chrome 的強大

油猴子腳本插件：

讓你的瀏覽器好用10倍的油猴子腳本大集合

還你一個乾淨的百度

賭五毛錢你的百度沒我的百度快

瀏覽網頁時，你還在手動翻頁嗎？

還你一個乾淨的微博和貼吧

fatkun插件：

老司機篇 | 收圖黨的春天

我發現了一個可以批量抓取原圖的秘密......

更多插件：

還你一個乾淨的百度 2.0

這個小工具能讓你的搜索效率提高100%

有沒有一款可以屏蔽所有視頻廣告的插件？

這款牛逼插件，解放了我的雙手！

歡迎分享給你的設計師盆友，歡迎留言寫下你常用的神器或插件！

啊喂，看完記得點贊哈！

firefox的firebug，很好用

是時候放大招了！

Chrome用戶可以來使用Fontface Ninja來查看，可以馬上輸入文字體驗該字體，有一些字體還可以直接下載！

https://chrome.google.com/webstore/detail/fontface-ninja/eljapbgkmlngdpckoiiibecpemleclhh

chrome和IE，按F12，然後看他們的CSS。firefox安裝firebug，還是按F12，查看CSS。

FIREBUG+1

@font-face調用的話可以看css查名稱，用typekit託管字體的話默認會在頁面右下角留一個logo單擊可查看該網頁使用的來自typekit的字體

基本網頁不用特殊字體都可以通過肉眼判斷，同意ls

但是比如 Kevin Deng的方法是比較科學而無錯的。

沒人說移動端

那我提一句iOS端的whatfont

安裝以後在safari里選中文字可以直接從share sheet里查看

用chrome瀏覽器，打開頁面，然後按下F12。就行了。

比如這個網址http://www.3maio.com

難道F12不是最方便的嗎

使用 Chrome 審查元素後，如果在網頁CSS中如果並列使用很多字體，可以修改CSS，一個個刪除來嘗試，觀察字形是否變化，這樣就能找到當前顯示的字體了。

chrome ctrl+shift+i

字體和字型大小一般都是在css中定義的，用firefox瀏覽器，安裝firebug插件或developer插件都可以查看到。用chrome自帶的開發者工具也可以查看，不過個人還是覺得firebug用起來順手一點。

題主的意思是某些好看的字體嗎？那些都是圖片，只有你有，他也有的字體你才看得到，否則就會自動變成宋體。解決辦法，截圖，然後百度字體識別

chrome瀏覽器能直接查看的