筆記 font-face優化的二三事

Web開發技術 | 2019-07-10 | 人氣:356   

Web Font的font-face在舊有存在的FOIT(Flash of Invisible Text)問題,會在字型檔讀取完畢前,畫面呈現一片空白的狀況,甚至有些老舊瀏覽器及未更新webview in app的手機端,空白後就直接停掉了,畫面上永遠不會有字的狀況。

 

而後來的瀏覽器核心則支援FOUT(Flash of Unstyled Text),先顯示內建優先的字型,再針對要求載入並顯示指定的font-face

 

新版的Google Font也有加入了指令來讓效果更佳
網頁HTML字形WebFont使用Google正黑體的CSS語法(2019更新)


而如果是本端使用的字型,如本站這種超醜的老舊點陣字XDDD
則可在CSS中加入font-display進行進一步的優化

 

font-display: swap; //先顯示內建優先的字型,畫面會在載完字型檔後,直接並自動顯示指定的字型,畫面會有突然變成新字型的效果,算是比較折衷的方式。
font-display: fallback; //若第一時間(100ms內)能載到新字型,則顯示指定的字型;否則就不顯示任何東西...這適合有設計載入判斷的網頁。
font-display: optional; //若第一時間(100ms內)能載到新字型,則顯示指定的字型;否則會先顯示內建優先的字型。然而在下一次或下一頁再次讀取到時,因為已經載完新字型或存在於CACHE中了,就會直接顯示已載完的指定字型。

 

其他優化及技巧

1. 運用unicode-range指定不同語系範圍用不同的字型檔,如中文的語系的為U+4E00-9FFF、英語系為U+00-024F,可分開使用不同字型。但缺點是有部份瀏覽器裝置無法正常支援。
2. FontSpider動態產生字型檔,但這個方法很硬,雖可避免一次載入檔案過大的字型檔,但也造成零碎的字型檔失去CACHE的效益,而使動態網頁的流量吃更重...
3. 把web font拉長Cache-Control時間,搭配font-display: optional效果會是最佳。


發表自: 九五二七九五二七
愛漫畫愛遊戲愛上網愛星爺,小時摸到阿羅士與AppleII後註定宅一輩子,從紅白機玩到PS4,從386打到Xeon,沒日沒夜的打電動;待過所有宅產業,從光華混到NOVA,從遊戲滾到動漫,從攝影器材爬到網路電信,喜愛學習多於睡覺,無時無刻散發一股宅味,但號稱長的像梁朝偉XD

覺得讚想推薦或分享嗎?