font-family設置多個值以後，在瀏覽器中怎麼確定到底是哪個字體生效了呢？

例如：

font-family: "Source Han Sans", "Microsoft YaHei", "FZLanTingHei-R", "Hei", "arial", "sans-serif";

在chrome中訪問，怎麼確定是哪個字體生效了呢？

---

Chrome 的開發者工具中，Elements &> Computed，最下方有一個 Rendered Fonts，可以看到某一元素下實際實用的字體及其字元數（可能有多個字體）。

Firefox 的開發者工具中，查看器 &> 字體，切過去可以看到用到的字體。如果是 @font-face 引入的還可以關聯到 CSS 定義和字體文件，是幾個工具里最強大的。

Firebug 中，HTML &> 樣式，其中 font-family 聲明中深色的那個是實際使用的字體。缺點是無法看到 sans-serif 這樣的通用字體族或者未匹配時自動 fallback 的字體。

-- 廣告 --

順便安利一下我的一個瀏覽器插件/書籤：fi: A simple web page font-family usage inspector.

可以用來快速查看全頁的 font-family 統計。Firefox 附加組件的版本可以點擊左上角切換成實際渲染所用字體的統計。

---

一開始我也以為chrome是不能看的，google了一下其實是可以的，以知乎為例：

Chrome DEV tools:

然後是Firefox默認的查看元素功能：

因為我在Fireofx中設置了默認字體為微軟雅黑，所以顯示效果和chrome不一樣。

---

這個只能用眼看吧；

如果是中文字體，基本上就是宋體和微軟雅黑，一眼就能看出；

---

這個只會查找本地涵蓋的字體庫，如本地沒有的字體文件，會統一顯示 network resource

---

Chrome Dev Tools -&> computed

---

推薦閱讀：