2018
10
12

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

關鍵字:網頁設計CSS3

因此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此模式最為特別,會依照使用者的網路狀況,當網路速度太慢時,則不加載字型,以預設的字型為主。

傑立資訊傑立資訊事業有限公司

電話:(02)2739-9096 | 傳真:(02)2739-6637 | 客服:[email protected] | 臺北市信義區和平東路3段257號6樓map

© 2016 傑立資訊 All rights reserved.法律顧問:宇恒法律事務所