font-display一般和@font-face一起使用，因為引用外部字型時可能出現載入慢或者載入失敗的情況，如果不單獨設定處理方式則會產生頁面文字延遲載入甚至直接不出現的情況。
font-display屬性：
auto:預設值。典型的瀏覽器字型載入的行為會發生，也就是使用自定義字型的文字會先被隱藏，直到字型載入結束才會顯示。
swap:後備文字立即顯示直到自定義字型載入完成後再使用自定義字型渲染文字。在大多數情況下，這就是我們所追求的效果。之前提及到的JavaScript指令碼實現的功能就基本和這個是一致的。
block 。在字型載入前，會使用備用字型渲染，但是顯示為空白，使得它一直處於阻塞期，當字型載入完成之後，進入交換期，用下載下來的字型進行文字渲染。不過有些瀏覽器並不會無限的處於阻塞期，會有超時限制，一般在 3 秒後，如果阻塞期仍然沒有載入完字型，那麼直接就進入交換期，顯示後備字型（而非空白），等字型下載完成之後直接替換。
fallback:這個可以說是auto和swap的一種折中方式。需要使用自定義字型渲染的文字會在較短的時間（100ms according to Google ）不可見，如果自定義字型還沒有載入結束，那麼就先載入無樣式的文字。一旦自定義字型載入結束，那麼文字就會被正確賦予樣式。
optional:效果和fallback幾乎一樣，都是先在極短的時間內文字不可見，然後再載入無樣式的文字。不過optional選項可以讓瀏覽器自由決定是否使用自定義字型，而這個決定很大程度上取決於瀏覽器的連線速度。如果速度很慢，那你的自定義字型可能就不會被使用。
此處貼上一個示例：
@font-face { font-family: 'vipLevel'; src: url('/src/static/ttf/優設標題黑.ttf'); font-display: swap; }
