CSS @font-face font-display: 글꼴 로딩 시 렌더링 방법

CSS @font-face @규칙의 font-display 서술자는 글꼴을 불러오는 동안, 그리고 불러온 후에 어떻게 표시할 것인지 지정합니다.

구문

font-display: auto;
font-display: block;
font-display: swap;
font-display: fallback;
font-display: optional;

값

차단 구간과 교환 구간에 대한 설명은 아래의 글꼴 표시 주기를 참고하세요.

auto

사용자 에이전트가 글꼴 표시 전략을 정합니다.

block

글꼴이 짧은 차단 구간과 무제한 교환 구간을 가집니다.

swap

글꼴이 극히 짧은 차단 구간과 무제한 교환 구간을 가집니다.

fallback

글꼴이 극히 짧은 차단 구간과 짧은 교환 구간을 가집니다.

optional

글꼴이 극히 짧은 차단 구간을 가지며 교환 구간은 가지지 않습니다.

설명

글꼴 표시 주기

글꼴 표시 주기는 사용자 에이전트가 주어진 글꼴의 다운로드를 시도하는 순간 시작하는 타이머에 기반합니다. 이 주기는 다음과 같은 총 세 개의 구간을 나뉘며, 해당 글꼴을 사용하는 요소의 렌더링 동작 방식을 결정합니다.

글꼴 차단 구간

글꼴이 아직 준비되지 않은 경우, 이 글꼴을 사용하는 모든 요소는 반드시 투명한 대체 글꼴을 사용해 렌더링을 해야 합니다. 이 구간일 때 글꼴을 가져온 경우 정상적으로 사용합니다.

글꼴 교환 구간

글꼴이 아직 준비되지 않은 경우, 이 글꼴을 사용하는 모든 요소는 반드시 다른 대체 글꼴을 사용해 렌더링을 해야 합니다. 이 구간일 때 글꼴을 가져온 경우 정상적으로 사용합니다.

글꼴 실패 구간

글꼴이 아직 준비되지 않은 경우, 사용자 에이전트는 이 글꼴의 다운로드를 실패로 취급하고 대체 글꼴을 사용해 렌더링합니다.

예제

swap 방식 지정하기

@font-face {
  font-family: ExampleFont;
  src: url(/foo/bar/example-font.woff2) format('woff2'), url(/foo/bar/example-font.woff) format('woff');
  font-display: fallback;
}

명세

• CSS Fonts Module Level 4

브라우저 호환성