웹 글꼴이 로드될 때의 동작을 결정하는 것이 중요한 성능 조정 기법이 될 수 있습니다. @font-face의 새로운 font-display 설명자를 사용하면 개발자가 웹 글꼴을 로드하는 데 걸리는 시간에 따라 웹 글꼴이 렌더링되는 방식 (또는 대체)을 결정할 수 있습니다.
오늘날 글꼴 렌더링의 차이
웹 글꼴을 사용하면 개발자가 프로젝트에 풍부한 서체를 통합할 수 있지만, 사용자가 아직 서체를 보유하고 있지 않은 경우 브라우저에서 서체를 다운로드하는 데 시간이 걸린다는 단점이 있습니다. 네트워크가 불안정할 수 있으므로 이 다운로드 시간은 사용자 환경에 부정적인 영향을 미칠 수 있습니다. 결국 텍스트를 표시하는 데 시간이 너무 오래 걸리면 아무도 텍스트가 얼마나 예쁜지 신경 쓰지 않습니다.
글꼴 다운로드 속도가 느려질 수 있는 위험을 완화하기 위해 대부분의 브라우저는 제한 시간을 구현하며, 이 제한 시간이 지나면 대체 글꼴이 사용됩니다. 이는 유용한 기법이지만 안타깝게도 브라우저마다 실제 구현이 다릅니다.
| 브라우저 | 제한 시간 | 대체 | 전환 |
|---|---|---|---|
| Chrome 35 이상 | 3초 | 예 | 예 |
| Opera | 3초 | 예 | 예 |
| Firefox | 3초 | 예 | 예 |
| Internet Explorer | 0초 | 예 | 예 |
| Safari | 제한 시간 없음 | 해당 사항 없음 | 해당 사항 없음 |
- Chrome과 Firefox에는 3초의 제한 시간이 있으며 이 시간이 지나면 텍스트가 대체 글꼴로 표시됩니다. 글꼴을 다운로드할 수 있으면 결국 전환이 발생하고 텍스트가 의도한 글꼴로 다시 렌더링됩니다.
- Internet Explorer의 제한 시간은 0초이므로 즉시 텍스트가 렌더링됩니다. 요청된 글꼴을 아직 사용할 수 없는 경우 대체 글꼴이 사용되며, 요청된 글꼴을 사용할 수 있게 되면 나중에 텍스트가 다시 렌더링됩니다.
- Safari에는 제한 시간 동작이 없거나 (또는 적어도 기준 네트워크 제한 시간 이외의 동작이 없음)
설상가상으로 개발자는 이러한 규칙이 애플리케이션에 미치는 영향을 제한적으로만 결정할 수 있습니다. 성능에 중점을 둔 개발자는 대체 글꼴을 사용하는 더 빠른 초기 환경을 제공하고 다운로드할 기회가 있었던 후속 방문에서만 더 나은 웹 글꼴을 활용하는 것이 좋습니다. Font Loading API와 같은 도구를 사용하면 일부 기본 브라우저 동작을 재정의하고 성능을 향상시킬 수 있지만, 그 대신 상당한 양의 JavaScript를 작성해야 하며, 이를 페이지에 인라인 처리하거나 외부 파일에서 요청해야 하므로 HTTP 지연 시간이 추가로 발생합니다.
이 문제를 해결하기 위해 CSS 작업 그룹은 새로운 @font-face 설명자 font-display와 다운로드 가능한 글꼴이 완전히 로드되기 전에 렌더링되는 방식을 제어하는 상응하는 속성을 제안했습니다.
글꼴 다운로드 일정
오늘날 일부 브라우저에서 구현하는 기존 글꼴 시간 제한 동작과 마찬가지로 font-display는 글꼴 다운로드의 전체 기간을 세 가지 주요 기간으로 분할합니다.
- 첫 번째 기간은 글꼴 블록 기간입니다. 이 기간 동안 글꼴 모음이 로드되지 않으면 이를 사용하려는 모든 요소는 대신 보이지 않는 대체 글꼴 모음으로 렌더링해야 합니다. 차단 기간 중에 글꼴이 정상적으로 로드되면 글꼴이 정상적으로 사용됩니다.
- 글꼴 교체 기간은 글꼴 차단 기간 직후에 발생합니다. 이 기간 동안 글꼴 모음이 로드되지 않으면 이를 사용하려는 모든 요소는 대체 글꼴 모음으로 렌더링해야 합니다. 전환 기간 중에 글꼴 모음이 성공적으로 로드되면 글꼴 모음이 정상적으로 사용됩니다.
- 글꼴 실패 기간은 글꼴 전환 기간 직후에 발생합니다. 이 기간이 시작될 때 글꼴이 아직 로드되지 않은 경우 로드 실패로 표시되어 일반 글꼴 대체가 발생합니다. 그렇지 않으면 글꼴이 정상적으로 사용됩니다.
이러한 기간을 이해하면 font-display를 사용하여 다운로드 여부 또는 다운로드 시점에 따라 글꼴이 렌더링되는 방식을 결정할 수 있습니다.
어떤 font-display가 적합할까요?
font-display 설명자를 사용하려면 @font-face at-rule에 추가합니다.
@font-face {
font-family: 'Arvo';
font-display: auto;
src: local('Arvo'), url(https://fonts.gstatic.com/s/arvo/v9/rC7kKhY-eUDY-ucISTIf5PesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
}
font-display는 현재 다음과 같은 값 범위 auto | block | swap | fallback | optional를 지원합니다.
자동
auto는 사용자 에이전트가 사용하는 글꼴 표시 전략을 사용합니다. 현재 대부분의 브라우저는 차단과 유사한 기본 전략을 사용합니다.
블록
block은 글꼴 면에 짧은 차단 기간 (대부분의 경우 3초 권장)과 무한 교체 기간을 부여합니다. 즉, 글꼴이 로드되지 않은 경우 브라우저는 처음에 '보이지 않는' 텍스트를 그립니다. 하지만 글꼴이 로드되는 즉시 글꼴 모양을 전환합니다. 이를 위해 브라우저는 선택한 글꼴과 유사한 측정항목을 가진 익명의 글꼴 모양을 만들지만 모든 글리프에 '잉크'가 포함되지 않습니다. 이 값은 페이지를 사용할 수 있으려면 특정 서체로 텍스트를 렌더링해야 하는 경우에만 사용해야 합니다.
스왑
swap은 글꼴 면에 0초의 블록 기간과 무한의 스왑 기간을 부여합니다. 즉, 글꼴이 로드되지 않으면 브라우저가 대체 글꼴로 텍스트를 즉시 그려 로드되는 즉시 글꼴을 전환합니다. block과 마찬가지로 이 값은 특정 글꼴로 텍스트를 렌더링하는 것이 페이지에 중요하지만 어떤 글꼴로 렌더링해도 올바른 메시지가 전달되는 경우에만 사용해야 합니다. 로고 텍스트는 전환에 적합합니다. 적절한 대체 텍스트를 사용하여 회사 이름을 표시하면 메시지를 전달할 수 있지만 결국 공식 서체를 사용하게 됩니다.
대체
대체는 글꼴 면에 매우 짧은 차단 기간 (대부분의 경우 100ms 이하 권장)과 짧은 전환 기간 (대부분의 경우 3초 권장)을 제공합니다. 즉, 글꼴이 로드되지 않은 경우 글꼴이 처음에는 대체 글꼴로 렌더링되지만 로드되는 즉시 글꼴이 전환됩니다. 그러나 시간이 너무 지나면 페이지의 나머지 기간 동안 대체 값이 사용됩니다. 대체 값은 사용자가 최대한 빨리 읽기를 시작하도록 하고 새 글꼴이 로드될 때 텍스트를 이동하여 사용자 환경을 방해하지 않으려는 경우 본문 텍스트와 같은 항목에 적합합니다.
선택사항
선택사항: 글꼴 면에 매우 짧은 블록 기간 (대부분의 경우 100ms 이하 권장)과 0초 스왑 기간을 제공합니다. 대체와 마찬가지로, 다운로드 글꼴이 '좋을 수는 있지만' 환경에 중요하지 않은 경우에 적합합니다. 선택사항 값은 브라우저가 글꼴 다운로드를 시작할지 여부를 결정하도록 합니다. 브라우저는 사용자에게 가장 적합하다고 생각하는 것에 따라 다운로드를 시작하지 않거나 낮은 우선순위로 다운로드를 실행할 수 있습니다. 이는 사용자가 연결 상태가 좋지 않아 글꼴을 가져오는 것이 리소스를 가장 잘 사용하는 방법이 아닐 수 있는 경우에 유용합니다.
브라우저 지원
font-display는 현재 데스크톱 Chrome 49의 실험용 웹 플랫폼 기능 플래그 뒤에 있으며 Opera 및 Android용 Opera에서 제공됩니다.
데모
샘플을 확인하여 font-display을 사용해 보세요. 성능에 중점을 둔 개발자에게는 도구 모음의 유용한 도구가 될 수 있습니다.