CSS font-display用法及代碼示例

使用網絡字體時，在加載網絡字體或經過三秒鍾之前，文本將是不可見的，此時將使用後備字體。

Font-display允許自定義在呈現頁麵時如何顯示Web字體。

它使用@ font-face規則應用，該規則在樣式表中定義自定義字體。

用法:

@font-face {
  font-family:Sample;
  src:url(samplefont.woff) format('woff'),
       url(samplefontbold.woff) format('woff');
  font-weight:normal;
  font-style:normal;
  font-display:optional;
}

例：

<!DOCTYPE html> 
<html> 
<head> 
    <title>CSS | font-display</title> 
    <meta name='viewport' content="width=device-width, initial-scale=1"> 
    <style> 
        @font-face { 
        font-family:Roboto; 
        src:url(Roboto\Roboto-BoldItalic.ttf) format('truetype'); 
        font-style:italic; 
        font-weight:bold; 
        font-display:block; 
    } 
  
    div{ 
        font-family:Roboto; 
        font-style:italic; 
        font-weight:bold; 
    } 
</style> 
</head> 
<body> 
<h1>Usage of font-display</h1> 
<div>Downloaded font</div> 
<p>Normal font</p> 
</body> 
</html>

輸出：

短時間後出現下載的字體。嘗試在IDE上運行以查看它。

font-display屬性時間線分為三個時期：

Block
Swap
Failure

屏蔽期：在未加載網絡字體之前，文本將不可見，在此期間渲染被屏蔽。

交換周期：通常，後備字體用於呈現文本，如果在交換期間成功加載了Web字體，則會將後備字體替換為Web字體。

失敗時間段：此時，認為加載失敗，並且將使用後備字體。

此屬性接受以下值：

自動(初始值)：在該值下，瀏覽器選擇了font-display技術。這通常類似於“塊”值。
塊：它會經曆一個小的塊周期，然後進入無限交換期，因此可以無限次渲染。以更簡單的形式，它將隱藏文本，直到加載Web字體為止。
交換：在此值下，為font-face提供最小的塊周期和無限的交換周期。它使用後備字體，直到加載Web字體
後退：給font-face一個最小的塊周期(100毫秒)和一個小的交換周期(約3秒)。它嘗試在短時間內加載Web字體，然後進入故障時期並使用後備字體。
可選：給font-face一個最小的塊周期，沒有交換周期。它會短暫隱藏文本，然後使用後備字體，直到可以使用Web字體作為自定義字體為止。

相關用法

注：本文由純淨天空篩選整理自jnikita356大神的英文原創作品 CSS | font-display property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。