[梅問題教學網] CSS3新屬性font-display優化雲端字型的載入方式

因此Google與Adobe也紛紛的推出免費的雲端字型，雖然都是免費，但二者有所不同，Adobe的雲端字型雖然好用，但卻有流量限制，雖然Google無流量限制，但每當使用者在瀏覽網頁時，就得先將字型給下載後，文字才會顯示，因此當剛載入時，像是網站掛掉一樣，但現在CSS3提供了一組新屬性font-display，可以設定雲端字型的載入方式，如此一來就可解決一開始噴白畫面的問題啦！至於這屬性要怎來使用，現在就一塊來看看。

Step1
首先，先到Can I use來了解一下，目前font-dispaly的支援狀況，幾乎所有的主流的瀏覽器都支援，像是Firefox、Chrome、Safari....等。

Step2
而font-display共有四種參數可作設定，同時當要使用時，只需在@font-face中加入即可。

font-display參數：

auto(default)：預設值，與block一樣，當載入完時，文字才顯示。
block：當文字加載完畢後，將當前的文字替換過去。
swap：邊載入時，文字套用。
allback：一開始先顯示預設字型，當字型載入完畢後，再一次替換，但加載時間過長時(3秒為限)，則會以預設字型文字，則不再加載。
optional：此模式最為特別，會依照使用者的網路狀況，當網路速度太慢時，則不加載字型，以預設的字型為主。