使用@ font-face將自定義字體上傳到CSS文檔是否會使事情呈現得更慢？

Question

我從dafont.com下載了一種字體，然后將其添加到當前僅在我的計算機上的html文件的樣式表中。 我更改了大多數按鈕以使用該字體，但是由於自定義字體，現在它的加載速度似乎變慢了（它過去幾乎在我的瀏覽器中立即呈現）。 有沒有一種方法可以解決計算機本地文件的問題，並且在將頁面實際上傳到網站后，還會導致頁面渲染緩慢嗎？

Answer 1

您可以嘗試不同的方法來提高性能：

• 在檢查在線版本之前，請先使用local參考：這將在您的計算機上運行，​​但您永遠不知道用戶是否安裝了具有相同名稱的其他字體（這不太可能，但這可能會破壞您的預期外觀。 ）。
• 渲染頁面后，請使用惰性加載來下載字體：這可能並不是真正有用，因為您使用的字體是頁面上的主要字體。
• 對於不打算使用的字體，不要包括@ font-face：無論是否使用，某些瀏覽器都會下載這些字體。
• 如果可能，請使用外部托管的字體（例如，在Google字體中）：如果字體是從以前的訪問中緩存的，則可以使您的頁面更快，並且與您的主機之間只有一個連接。
• 聽起來有些不對，但是：明智地選擇字體。 如果您選擇漂亮的字體但文件大小為10MB，則是否會影響性能。 與文件大小有關，
• 如果可能，請gzip您的字體文件：它們的重量會減輕，下載時間也將減少。

在鏈接上閱讀有關此主題的更多信息：

• 防止性能受到自定義字體的影響 。
• @ font-face和性能