什么時候下載了后備字體？

Question

如果我將Google字體設置為后備字體，如下所示：

@font-face {
    font-family: 'GoogleFont';
    src: url('GoogleFont.ttf');
}

html, body {
    font-family: 'myMainFont', 'GoogleFont';
}

如果主字體失敗，Google字體是否只會下載到用戶的瀏覽器？

Answer 1

編輯

根據規范，@ font-face字體只應在需要呈現文檔時下載： http ： //www.w3.org/TR/css3-fonts/#font-face-loading

@ font-face規則旨在允許延遲加載僅在文檔中使用時下載的字體資源。 樣式表可以包括@ font-face規則，用於僅使用選擇集的字體庫; 用戶代理只能下載適用於給定頁面的樣式規則中引用的那些字體。 下載@ font-face規則中定義的所有字體而不考慮這些字體是否實際在頁面中使用的用戶代理被認為是不符合要求的。 如果在字符回退情況下可能下載字體，則用戶代理可以下載字體，如果它包含在給定文本運行的'font-family'的計算值內。

注意：在撰寫此答案時，各種系統上的不同版本的瀏覽器似乎以不同的方式實現此行為。 我們所能做的就是希望它們最終符合規范。

Chrome和Firefox（正在測試其他正在進行的操作）只會下載呈現正在顯示的內容所需的字體，無論是通過@ font-face指定的內容。 更重要的是，如果您指定@ font-face字體然后不使用它，例如

 
 
 
  
  .css-rule { font-family: Helvetica,'My at-font-face-font',sans-serif; }
 
  

然后，您的自定義字體 將不會被下載，因為它不需要。

要檢查正在下載的字體以及何時下載，請在頁面加載期間打開網絡選項卡。

編輯

瀏覽器的行為似乎在這個問題上差別很大，我鼓勵更多地關注您的個人情況。

但是，我可以 保證一件事，並不是所有字體都會在所有瀏覽器中一直下載，只是因為你已經通過 @font-face聲明了它們。

Answer 2

否：瀏覽器實現方式各不相同，因此您無法相信字體將被忽略（即使不需要它們）。

客戶端的操作系統，瀏覽器和版本都會導致變體性能 - 瀏覽器可能提供的其他設置也是如此。 請參閱Adam關於W3“規則”的瀏覽器合規性的答案 。

檢查在此處和此處在不同瀏覽器中下載的資源，以查看字體的處理方式。

---

話雖如此 ， 根據MDN文檔 ，如果您在@font-face src屬性中指定多個文件，則可以獲得正在尋找的“后備”行為：

@font-face {
  font-family: MyFontName;
  src: url("MyMainFont.tff"), url("MyBackupFont.ttf");
}

在此示例中 ，如果找不到第一個文件，那么我們繼續沿着src列表繼續，直到找到有效文件。 因此，只有在MyMainfont.tff才會下載MyBackupFont.tff 。 您還可以使用local("FontName")在src指定本地文件。

---

順便說一下， 克里斯有一篇關於如何“負責任地使用[@ font-face]”的文章 。