如何延遲加載由@ font-face聲明的網頁字體？

Question

我得到的是一個字體系列CSS聲明，首先使用風格化的Web字體，然後回退到系統字體。這工作正常，但我的網頁字體是巨大的〜15MB（中文字體），甚至承載CDN它需要超過5s加載。

問題在於瀏覽器以不同方式處理顯示。我認爲Firefox有一個首選的方法，那就是先使用任何可用的字體（系統字體），並在準備（加載）時逐漸顯示在Web字體中。

但是，Chrome只是首先嚐試使用Web字體（因爲它在字體系列中首先列出），並且只是顯示一個空格，直到字體準備好呈現文本。

有什麼辦法可以讓Chrome的行爲與Firefox相同？

編輯：添加字體家族的聲明。

font-family: "Noto Sans CJK TC", "Microsoft Yahei", "微軟雅黑", 
      SimHei, "黑體", STHeiti, "華文黑體", sans-serif; 

Answer 1

看完所有的評論後，我現在有一個可以接受的解決方案來逐步加載Web字體。

1. 如果可能，請使用字體的子集（包含您打算在頁面上使用的所有字符/字形）。我沒有成功嘗試創建自己的子集，因爲該文件非常龐大（字體松鼠的文件大小限制），但幸運的是，我可以使用谷歌早期訪問字體（Noto Sans TC）的字體。文件大小從15MB變爲2MB。
2. 上傳到主機時使用gzip壓縮（woff2/woff/eot文件已壓縮或未顯示太多文件大小縮減）。我設法保存了300K這樣做。
3. 設置您的font-family CSS定義最初使用網絡安全字體。
4. 像往常一樣定義您的@font-face定義，並使用帶有事件處理功能的字體加載器逐步呈現字體（https://github.com/bramstein/fontfaceobserver）。
5. Fontfaceobserver將一個類名添加到HTML元素中，所以使用它作爲元素選擇並使用加載的字體覆蓋現有字體系列定義（將新字體系列添加到現有字體系列的前面）。

當新加載的字體替換網頁安全的字體時會有輕微的「彈出」，但至少沒有FOIT（不可見文本閃爍）。

https://www.filamentgroup.com/lab/font-events.html對使用​​FontFaceObserver有很好的指導，但無法讓它與他們的示例代碼一起工作。相反，我使用了GitHub倉庫的參考代碼 - 儘管我認爲他們的措辭是錯誤的/誤導性的。如果您尚未實施Promise填充，則應使用fontfaceobserver.standalone.js。