FOIT (Flash of Invisible Text)
웹폰트가 로드될 때까지 텍스트를 렌더링 하지 않다가 로드가 된 이후에 텍스트를 보여주는 동작이다.
FOUT (Flash of Unstyled Text)
웹폰트가 로드될때까지 시스템의 기본 폰트를 보여주고 이후 reflow 해서 글꼴을 대체하는 방식
https://www.malthemilthers.com/wp-content/uploads/2017/06/foit-fout-animation.gif
FOUC (Flash of Unstyled Content)
웹 폰트 최적화 하기
https://velog.io/@vnthf/%EC%9B%B9%ED%8F%B0%ED%8A%B8-%EC%B5%9C%EC%A0%81%ED%99%94-%ED%95%98%EA%B8%B0
해결방법:
1. @font-face속성 중 font-display 사용
2. Javascript를 이용
2-1. webfontloader
2-2. class 추가 → FOUT발생
3. CSS opacity 설정
4. preload
댓글