참고
font-display
뜻
font face가 표시되는 방법을 결정한다.
다운로드 여부와 사용시기에 따라 다르다.
교체기간 : font display timeline
User Agent(웹 브라우저)가 지정된 다운로드를 폰트를 사용하려는 순간 시작하는 타이머를 기반으로 한다.
폰트 차단 기간
지정된 폰트가 로드되지 않은 경우, 보이지 않는 대체 폰트로 렌더링한다.
이 기간동안 성공적으로 폰트가 로드되면, 요청된 폰트로 다시 렌더링된다.
즉, 안보였다가 폰트 로드가 완료되면 지정된 폰트로 나타남
폰트 교체 기간
지정된 폰트가 로드되지 않은 경우, 대체 폰트로 렌더링한다.
이 기간동안 폰트가 성공적으로 로드되면, 요청된 폰트로 다시 렌더링된다.
즉, 다른 폰트로 보였다가 폰트 로드가 완료되면 지정된 폰트로 나타남
폰트 실패 기간
폰트가 로드되지 않은 경우, User Agent는 로드 실패로 취급하고 정상적인 대체 폰트를 렌더링한다.
즉, 지정된 폰트 로드 실패로 간주하여 대체 폰트로 렌더링한다.
속성
font-display: auto;
font-display: block;
font-display: swap;
font-display: fallback;
font-display: optional;font-display: auto;
User Agent에 의해 정의된다.
font-display: block;
짧은 차단기간 & 무한대의 교체기간
- 첫 진입시에 차단기간동안(약 3초) 글씨가 보이지 않고, 한번에 모든 폰트가 동시에 로드되는 것이 아니기 때문에, 의도하지 않은 정보를 노출시킬 수 있다. (FOIT : Font of Invisible Text)
- 3초가 짧은 시간이긴 하지만, 사용자는 3초면 이미 스크롤을 넘긴 상태일수도 있다. 😱
font-display: swap;
차단기간 없음 & 무한대의 교체 기간
- 폰트가 변경되는 모습이 노출된다. (FOUT : Font of unstyled Text)
- 기본 폰트가 지정한 폰트와 차이가 클 경우 텍스트가 노출된 상태로 변경이 될 때, 화면이 크게 전환되어 불편함을 초래할 수 있다.
font-display: fallback;
매우 짧은 차단기간 & 짧은 교체기간
- 교체기간까지 약 3초가 소요되며, 그 사이에 폰트가 로드되지 않는다면 fallback 폰트가 보여진다.
- 웹 폰트가 중요한 요소가 아니라면, 이 옵션이 좋을 수 있다.
font-display: optional;
매우 짧은 차단기간 & 교체기간 없음
