CSS font-display

Created
Created
2022 Jan 28 14:17
Refs
Refs
FOUT
  • auto: block과 비슷
  • block: FOIT처럼 작동, 로딩되지 않을 때는 텍스트를 렌더링하지 않으며(최대 3초) 웹폰트가 로딩되면 적용
  • swap: FOUT처럼 작동, 우선 Fallback으로 렌더링하고 웹폰트가 로딩되면 적용
  • fallback: 100ms 동안 렌더링하지 않다가 Fallback으로 렌더링, 3초안에 로딩이 완료되면 완료된 폰트로 아니라면 Fallback 폰트 유지
  • optional: 100ms 동안 렌더링 하지 않다가 Fallback으로 렌더링, 브라우저가 네트워크 상태를 파악해 웹폰트로 전환여부를 결정
 
 
 
font-display - CSS: Cascading Style Sheets | MDN
The font-display descriptor determines how a font face is displayed based on whether and when it is downloaded and ready to use. The font display strategy is defined by the user agent. Gives the font face a short block period and an infinite swap period.
font-display - CSS: Cascading Style Sheets | MDN
 
 
 

Recommendations