웹 폰트 로딩에서 FOIT(Flash of Invisible Text)와 FOUT(Flash of Unstyled Text)의 차이는?

쉬움 MDN Web Docs

보기 및 정답

A FOIT는 웹 폰트 로딩 중 텍스트가 보이지 않고, FOUT는 시스템 폰트로 먼저 보여준 뒤 웹 폰트로 교체된다

B FOIT는 웹 폰트가 시스템 폰트보다 빠르게 로딩되어 표시되고, FOUT는 웹 폰트가 느리게 로딩되는 현상이다

C FOIT와 FOUT는 웹 폰트 로딩 시 발생하는 동일한 현상을 설명하는 서로 다른 이름일 뿐 차이가 없다

D FOIT는 웹 페이지의 이미지 리소스 로딩과 관련된 현상이고, FOUT는 CSS 스타일시트 로딩과 관련된 현상이다

FOIT에서는 웹 폰트가 로드될 때까지 텍스트가 투명하게 렌더링되어 사용자가 내용을 읽을 수 없습니다. FOUT에서는 시스템 폰트로 먼저 표시한 후 웹 폰트로 교체됩니다. font-display: swap은 FOUT 방식을 채택하여 초기 가독성을 보장합니다.

개념 확인은 퀴즈로, 실력은 실전 프로젝트로.
투더제이 코딩클래스에서 시작하세요.

로그인