如何識別頁面/網站上使用的所有字體的所有重量

Question

我正在使用Google網頁字體。最初，我包括了一個給定家庭的所有重量，所以我可以選擇所有我想要的。舉例來說：

<link href='http://fonts.googleapis.com/css?family=Roboto:300,300italic,400,400italic,500,500italic,700,700italic,900,900italic' rel='stylesheet'> 

一旦我完成了，我只想要最終使用的權重在頁面加載時取得以最小化大小。我完成的鏈接看起來像

<link href='http://fonts.googleapis.com/css?family=Roboto:400,400italic,900,900italic' rel='stylesheet'> 

我想我可以滾動經過我的整個CSS目錄和眼球的所有頁面發現我使用的全部重量，但是這容易出錯。乍一看，我怎麼能確切地知道，我最終使用了哪些權重？

PS：有幾件事情我想：

1. Firebug的網絡面板可以讓你看到谷歌的字體腳本是否被調用，但沒有指定使用哪個權重。
2. Chengyin Liu的非常漂亮的WhatFont工具（http://chengyinliu.com/whatfont.html），但只允許你將鼠標懸停在單個元素上。

Answer 1

1. Firebug的網絡面板可以讓你看到谷歌的字體腳本是否被調用，但沒有指定使用哪個權重。

Firefox只加載實際在頁面上使用的字體。他們只是加載一次，然後存儲在一個特殊的字體緩存。 所以還是更多地瞭解哪些字體你的頁面上使用，給Net panel另一個嘗試：

1. 打開Firebug您的網頁上
2. 啓動並切換到淨面板
3. 點擊通過按Ctrl + F5 字體過濾面板工具欄
4. 重新加載頁面中circumvent the cache

=>在淨面板，您現在應該看到列出的字體，這是在頁面上使用的所有請求。

注：在Chrome和Opera的DevTools也表明你所使用的字體，但他們似乎並沒有把字體緩存，所以他們爲他們的請求，甚至有一個正常的頁面重新加載（通過F5 ）。 Internet Explorer（11）並不那麼聰明，即使根本沒有使用它，它也會加載所有字體。