一招教你搞定WebFont網頁瞬閃問題
如果你的網頁使用了Web Font,你可能或多或少會收到網站的使用者告訴你:欸,為什麼你的網頁字會閃一下?這時,你可能納悶什麼叫做閃一下,開了網頁後,卻又沒看到使用者描述的狀況。這其實是CSS加上網路速度的問題:在還未將Web Font字型下載完成前,會先以系統預設字型顯示頁面,等到下載完成才套用到已顯示在瀏覽器的字型上。也因為如此,如果瀏覽網頁的電腦網路不夠快,可能會發生已經頁面載入完畢了,Web Font的內容隔了1~2秒才接著載完並套用,此時,就會發生所謂的「眨眼」現象了。
這樣的問題,我們可以透過加入以下CSS的方式,告訴網頁在確認Web Font狀態前,就算頁面內容載入完畢,也先將文字隱藏起來,直到確認了Web Font的狀態後,再將文字顯示,這樣就可以避免瀏覽網頁時出現文字瞬閃了!
code
.arwf-loading body { /*Web Font正在載入中,不顯示文字*/
opacity: 0;
visibility: hidden;
}
.arwf-active body { /*Web Font處理成功,直接顯示文字*/
opacity: 1;
visibility: visible;
}
.arwf-inactive body {/*如果Web Font處理失敗,直接顯示文字*/
opacity: 1;
visibility: visible;
}