CSS font-display

Created

Created

2022 Jan 28 14:17

Refs

Refs

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

https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display

font-display - CSS: Cascading Style Sheets | MDN

Recommendations

//////////