font-display

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

font-display 설명자(descriptor)는 font face가 표시되는 방법을 결정합니다. 이는 다운로드 여부와 사용 시기에 따라 다릅니다.

The font display timeline

font display 시각표는 유저 에이전트가 지정된 다운로드 폰트를 사용하려는 순간 시작하는 타이머를 기반으로 합니다. 시각표는 아래의 세 가지 기간(period)으로 나뉘어져 font face를 사용하는 모든 요소(element)의 렌더링 동작을 나타냅니다.

폰트 차단 기간

font face가 로드되지 않은 경우 font face를 사용하려는 요소는 보이지 않는 대체 폰트를 렌더링 합니다. 이 기간 동안 font face가 성공적으로 로드되면 요청된 폰트로 다시 렌더링 됩니다.

폰트 교체 기간

font face가 로드되지 않은 경우 font face를 사용하려는 요소는 (텍스트가 표시되는)대체 폰트를 렌더링 합니다. 이 기간 동안 font face가 성공적으로 로드되면 요청된 폰트로 다시 렌더링 됩니다.

폰트 실패 기간

font face가 로드되지 않은 경우 유저 에이전트는 로드 실패로 취급하고 정상적인 대체 폰트를 렌더링 합니다.

Related at-rule@font-face
초기값auto
계산 값as specified

Syntax

css
/* Keyword values */
font-display: auto;
font-display: block;
font-display: swap;
font-display: fallback;
font-display: optional;

Values

auto

font display 전략은 유저 에이전트에 의해 정의됩니다.

block

font face에 짧은 차단 기간과 무한대의 교체 기간을 부여합니다.

swap

font face에 매우 작은 차단 기간과 무한대의 교체 기간을 부여합니다.

fallback

font face에 매우 작은 차단 기간과 짧은 교체 기간을 부여합니다.

optional

font face에 매우 작은 차단 기간과 교체 기간을 부여합니다.

Formal syntax

font-display = 
  auto      |
  block     |
  swap      |
  fallback  |
  optional

Examples

css
@font-face {
  font-family: ExampleFont;
  src:
    url(/path/to/fonts/examplefont.woff) format("woff"),
    url(/path/to/fonts/examplefont.eot) format("eot");
  font-weight: 400;
  font-style: normal;
  font-display: fallback;
}

명세서

Specification
CSS Fonts Module Level 4
# font-display-desc

브라우저 호환성

BCD tables only load in the browser

See also