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

　　自從CSS3支援雲端字型後，讓網頁終於不再只有那101種字型新細明體與中黑體，也讓網頁的字型有更多選擇，同時再也不必受限於使用者中的電腦字型，雖然說將文字嵌入到網頁是件好事，但礙於中文字實在太複雜，因此隨便一組中文字，單文字大小就近5、6MB，光是載入就是一個相當致命的部分。

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

---

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

---

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

---

Step3
由於梅干是使用swap，因此當載入多少字型時，文字就會陸續的被替換過去。

---

Step4
而梅干個人比較喜愛此屬性，邊載入邊套用，因此當網路字型未載入時，依然可顯示原來的字型，才不會一開始網頁整個變白畫面，直到載入完畢才一起顯示，因此目前有四種模式可作控制，各位就可以自己所設來作設定囉！