如何消除阻塞的CSS是字體？

我目前使用被包含在通過鐵軌我的標籤谷歌的字體application.scss像這樣：如何消除阻塞的CSS是字體？

`@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700');`

谷歌的PageSpeed是說我需要「消除阻止呈現的JavaScript和CSS在上面的倍內容「當我將字體CSS移動到頁面底部時，只要頁面加載整個頁面就跳轉。

我該如何讓Google字體無阻塞，但是在完成加載時沒有跳轉的頁面？由於

來源

2017-01-22 AnApprentice

這正是阻塞的意思。如果在字體加載之前不想渲染頁面，則需要阻止加載。 – SLaks

你在說什麼是'FOIT'。這裏有一些文章可以幫助你。 1. https://css-tricks.com/fout-foit-foft/ 2. https://www.lockedowndesign.com/load-google-fonts-asynchronously-for-page-speed/ 3. https：// www.filamentgroup.com/lab/font-events.html –

@SLaks謝謝，我明白了，但必須有一些技巧，使頁面不跳/抖動等。 – AnApprentice

你可以閱讀關於這個問題非常不錯的文章here

的事情是，你將無法擺脫跳躍的問題（除非自定義字體具有完全相同的屬性的字體被取代）。

而你有它。如果您第一次加載頁面，您將立即看到回退字體，然後加載Web字體。隨後的訪問將加載緩存中的Web字體並立即顯示它們。這是兩全其美的。

所以是的，長話短說，你可以有表現，或者你可以避免FOUC，但不是兩者兼而有之。

來源

2017-01-22 03:47:34

如何消除阻塞的CSS是字體？

回答

相關問題