CSS, CSS3

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

梅干2018/10/02
梅問題-[教學] CSS3新屬性font-display優化雲端字型的載入方式
  自從CSS3支援雲端字型後,讓網頁終於不再只有那101種字型新細明體與中黑體,也讓網頁的字型有更多選擇,同時再也不必受限於使用者中的電腦字型,雖然說將文字嵌入到網頁是件好事,但礙於中文字實在太複雜,因此隨便一組中文字,單文字大小就近5、6MB,光是載入就是一個相當致命的部分。
  因此Google與Adobe也紛紛的推出免費的雲端字型,雖然都是免費,但二者有所不同,Adobe的雲端字型雖然好用,但卻有流量限制,雖然Google無流量限制,但每當使用者在瀏覽網頁時,就得先將字型給下載後,文字才會顯示,因此當剛載入時,像是網站掛掉一樣,但現在CSS3提供了一組新屬性font-display,可以設定雲端字型的載入方式,如此一來就可解決一開始噴白畫面的問題啦!至於這屬性要怎來使用,現在就一塊來看看。
Step1
首先,先到Can I use來了解一下,目前font-dispaly的支援狀況,幾乎所有的主流的瀏覽器都支援,像是Firefox、Chrome、Safari....等。
梅問題-[教學] CSS3新屬性font-display優化雲端字型的載入方式
Step2
而font-display共有四種參數可作設定,同時當要使用時,只需在@font-face中加入即可。
font-display參數:
auto(default):預設值,與block一樣,當載入完時,文字才顯示。
block:當文字加載完畢後,將當前的文字替換過去。
swap:邊載入時,文字套用。
allback:一開始先顯示預設字型,當字型載入完畢後,再一次替換,但加載時間過長時(3秒為限),則會以預設字型文字,則不再加載。
optional:此模式最為特別,會依照使用者的網路狀況,當網路速度太慢時,則不加載字型,以預設的字型為主。
梅問題-[教學] CSS3新屬性font-display優化雲端字型的載入方式
Step3
由於梅干是使用swap,因此當載入多少字型時,文字就會陸續的被替換過去。
梅問題-[教學] CSS3新屬性font-display優化雲端字型的載入方式
Step4
而梅干個人比較喜愛此屬性,邊載入邊套用,因此當網路字型未載入時,依然可顯示原來的字型,才不會一開始網頁整個變白畫面,直到載入完畢才一起顯示,因此目前有四種模式可作控制,各位就可以自己所設來作設定囉!
梅問題-[教學] CSS3新屬性font-display優化雲端字型的載入方式