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效果會是最佳。