如何找到使用特定字體系列的 css 類（例如 chrome 開發工具）？

Question

我目前正在更新我所有的網站，從使用 webfonts 到我自己在本地托管 fonts。 這個過程有點令人沮喪，因為我經常找不到 webfonts 的 css 類。 目前，這更像是一種“嘗試和錯誤”的事情，我只是在瀏覽谷歌瀏覽器開發工具並尋找相應的 css 類。 所以我想知道是否有一種簡單的方法可以通過瀏覽器在已發布的網站中查找特定字體系列的 css 類？ （我無法搜索 IDE 中的類，因為在這個用例中是使用 webflow 開發的網站）

編輯：有問題的網站是使用稱為“Webflow”的“構建塊”系統創建的。 在那里，通過圖形界面選擇 fonts。 現在的問題是，在這些古老而巨大的 web 頁面的某個地方，有使用“Lato webfont”的 CSS 類。 我想替換這個字體，但是我在這個圖形界面中搜索不到使用過的fonts。 我可以搜索的是 CSS 類。 所以我的想法是使用 Chrome 開發工具找出哪些 CSS 類最終使用了 Lato 字體來替換它。

Answer 1

如果我說得對，並且您的最終目標是用本地字體文件替換外部托管的字體文件（例如，為了提高 GDPR 合規性），您不需要獲取每個 css 字體系列 class 參考。

最重要的部分是實際響應下載字體文件的@font-face規則。
好的，這並不完全正確，因為除非某些 DOM 元素使用這個特定的字體系列，否則不會下載字體文件。
換句話說，您的 css 實際上可能包含大量未使用的字體系列——另一方面，如果它們沒有在任何不會被下載的地方使用（因此瀏覽器有默認的字體延遲加載方法）。

示例：您需要將 google webfonts 替換為本地托管的 fonts

• 打開您的 devTools 並切換到“字體”選項卡
• 現在您可以看到所有下載字體文件的列表以及它們的來源 (URL) 和它們的“啟動器”——啟動文件下載的源文件。 通常這將是 css 中的<link>樣式表引用或@import規則，但它也可以是 javaScript 字體加載器方法。

通過檢查“URL”列，我們可以清楚地看到字體是否是從外部主機加載的。
單擊“Initiator”行/條目將打開觸發下載的文件 - 這將是您要完全刪除的文件（如 a.css）或只是 css 文件的一部分（仔細查看@font- face 規則，尤其是src屬性）。

遵循 google webfonts 用例/示例
（實際上與其他字體交付服務非常相似）

• 顯然我們需要獲取我以前在外部托管的字體文件的本地副本——
  google web 字體助手可能有助於獲得准備就緒的@font-face css 和下載 package，包括所有需要的字體文件。
• 我們需要刪除仍然引用外部文件源的所有 css 文件或@font-face或@import規則，並用自定義的本地字體文件 url 替換它們。

刪除外部字體文件引用的可能快捷方式：
檢查您的 HTML/模板頭中是否存在此類不需要的元素
（因此包含外部 URL，如“fonts.googleapis.com”）：

• <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700" rel="stylesheet">
• 或在@import規則的內聯<style>標記中，例如@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700')
• 或主 css 文件中的類似@import規則——它們通常應該在 css 代碼的頂部找到。

刪除這些引用並用自定義@font-face規則替換（示例基於 google web 字體助手 output 使用“Roboto”字體系列和字體權重 400+700...常規和粗體）。

/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/roboto-v30-latin-regular.woff2') format('woff2');
}
/* roboto-700 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/roboto-v30-latin-700.woff2') format('woff2'); 
}

再次檢查網絡選項卡
如果一切正常，我們應該看到本地檢索到的每種樣式的字體文件（例如常規、粗體、斜體、粗斜體等）
如果不是：仔細檢查您的文件路徑！
說真的，這可能是最常見的錯誤來源。 （例如“../fonts/”或“./fonts/”或只是“fonts/”）。