CSS保健室｜font-display

font-display

font-display 就跟遊樂園鬼屋一樣，在還沒走出去前，園方都可以選擇哪裡顯示鬼嚇人，哪裡要隱藏讓遊客喘口氣。

（ 圖片來源 ）

目前 IE 瀏覽器不支持 font-display 屬性。

font-display 設置字型於加載完成之前會先顯示或隱藏。

FOUT ( flash of Unstyle Text )

即設定的 @font-face 於加載完成之前會先顯示瀏覽器預設的字型，過往的瀏覽器預設多為此。

FOIT ( flash of Invisible Text )

即設定的 @font-face 於加載完成之前會先隱藏內容到字型加載完成後再跳出顯示，現今瀏覽器預設多為此。

不論是 FOUT 還是 FOIT 都有各自的優缺點，所以如何在這兩者中取得適當的平衡就是 font-display 的功能。

font-display 屬性：

auto

使用各瀏覽器自身的預設值，通常與 block 相似。

block

當字型加載完成前會先隱藏內容，直到自定義字型完全被加載完成後顯示。
瀏覽器會使用一個匿名且隱形的替代字型或者說是佔位符號，來短暫地代替原本的內容，直到字型下載好後立即交換，即 FOIT 。

swap

瀏覽器使用自身的預設字型（ 備用字型 ），直到自定義字型加載完成後切換，即 FOUT 。

fallback

介於 auto 與 swap 的中間值，瀏覽器會先短暫地隱藏內容，直到自定義的字型加載完成後再進行切換，但如果加載的時間過長，則使用瀏覽器的預設字型（ 備用字型 ）取代之。（ 等待加載時間約為 3 秒 ）

optional

行為模式與 fallback 相似，差別在於此值會自行判定是否要加載使用者的自定義字型，取決於使用用戶的網路環境，對於網速過慢、收訊較差的使用者來說相當合適，可以省去不必要的下載時間並順利地檢視內容。

以下是各值在自定義字型加載完成前所對應的隱藏時間與加載完成後切換字型的對應表，可以當作一個使用的參考：

參考資料

使用 font-display 改善與優化網站效能