font-display로 글꼴 성능 제어

Rob Dodson

웹 글꼴이 로드될 때 웹 글꼴에 대한 동작을 결정하는 것은 중요한 성능 조정 기법입니다. 새로운 글꼴 표시 설명자는 @font-face를 사용하면 개발자가 웹 글꼴의 렌더링 (또는 대체) 방식을 결정하고 로드 시간에 따라 달라집니다.

현재 글꼴 렌더링의 차이점

웹 글꼴을 사용하면 개발자가 글꼴에 풍부한 서체를 사용자가 이미 보유 중인 리소스가 없는 경우 다운로드하느라 시간을 허비해야 하기 때문입니다. 네트워크는 다운로드 시간이 길어지면 사용자의 경험해 볼 수 있습니다 텍스트가 얼마나 예쁘다는 의미인지 아무도 신경 쓰지 않을 것입니다. 표시하는 데 너무 오래 걸립니다.

느린 글꼴 다운로드의 위험을 어느 정도 완화하기 위해 대부분의 브라우저는 제한 시간이 지나면 대체 글꼴이 사용됩니다. 이것은 유용한 기법이지만 안타깝게도 브라우저의 실제 구현에 따라 다릅니다.

• Chrome 및 Firefox에는 3초의 제한 시간이 있으며 그 후 텍스트가 표시됩니다. 사용할 수 있습니다. 글꼴이 다운로드되면 결국 텍스트가 의도한 글꼴로 다시 렌더링됩니다.
• Internet Explorer는 시간제한이 0초이므로 있습니다. 요청된 글꼴을 아직 사용할 수 없는 경우 대체가 사용됩니다. 요청한 글꼴을 사용할 수 있게 되면 나중에 다시 렌더링됩니다.
• Safari에는 시간 초과 동작이 없거나 최소 기준 네트워크를 벗어나는 동작이 없습니다. 시간 초과).

설상가상으로, 개발자가 어떻게 이러한 기능을 어떻게 제공할지 결정하는 데 한계가 있습니다. 응용 프로그램에 영향을 미칩니다 성능에 관심이 많은 개발자는 대체 글꼴을 사용하는 더 빠른 초기 환경을 구현하고 더 좋은 웹 글꼴을 표시하는 것입니다. Font Loading API와 같은 도구를 사용하면 기본 브라우저 동작을 바꾸어 성능을 향상할 수 있지만, 상당한 양의 자바스크립트를 작성하는 데 드는 비용을 페이지에 인라인되거나 외부 파일에서 요청되어 HTTP 지연 시간.

이 상황을 해결하기 위해 CSS 실무 그룹에서 @font-face 설명어, font-display, 상응하는 속성 다운로드 가능한 글꼴이 완전히 로드되기 전에 렌더링하는 방식을 제어합니다.

글꼴 다운로드 타임라인

일부 브라우저에서 구현하는 기존의 글꼴 시간 제한 동작과 유사 현재 font-display는 글꼴 다운로드의 전체 기간을 세 가지 주요 있습니다.

1. 첫 번째 기간은 글꼴 차단 기간입니다. 이 기간 동안 글꼴이 로드되지 않으면 이 글꼴 사용을 시도하는 모든 요소가 대신 렌더링되어야 합니다. 사용할 수 있습니다. 글꼴이 글꼴이 정상적으로 사용됩니다.
2. 글꼴 스왑 기간은 글꼴 차단 기간 직후에 발생합니다. 기간 중 이 기간 동안, 글꼴이 로드되지 않으면 글꼴이 사용을 시도하는 모든 요소가 대신 대체 글꼴로 렌더링해야 합니다. 글꼴이 제대로 로드되면 글꼴이 정상적으로 사용됩니다.
3. 글꼴 실패 기간은 글꼴 스왑 기간입니다. 이 기간이 시작될 때 글꼴이 아직 로드되지 않으면 로드 실패로 표시되어 일반 글꼴 대체가 발생합니다. 그 외의 경우에는 글꼴이 얼굴이 정상적으로 사용됩니다.

이 기간을 이해하면 font-display을(를) 사용하여 다운로드 여부 또는 시기에 따라 글꼴이 렌더링되어야 합니다.

나에게 적합한 글꼴 표시는 무엇인가요?

font-display 설명어를 사용하려면 @font-face at-rules에 추가합니다.

@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초가 권장됨). 무한 스왑 기간이 있습니다 즉, 브라우저는 '보이지 않는' 문자 메시지 글꼴이 로드되지 않으면 먼저 글꼴이 로드되자마자 있습니다. 이를 위해 브라우저는 측정항목을 사용하여 익명의 글꼴을 만듭니다. 선택한 글꼴과 비슷하지만 모든 글리프에 '잉크'가 포함되어 있지 않습니다. 이 값은 특정 서체로 텍스트를 렌더링하는 경우에만 사용해야 합니다. 가 필요합니다.

스왑

스왑은 글꼴에 0초의 차단 기간과 무한 스왑 기간을 제공합니다. 즉, 글꼴이 이 로드되지 않고 로드되는 즉시 글꼴이 스왑됩니다. 차단과 마찬가지로 이 값은 특정 글꼴로 텍스트를 렌더링할 때만 페이지에 중요하지만 모든 글꼴로 렌더링하면 메시지가 표시됩니다. 로고 텍스트는 광고를 표시하기 때문에 교체에 회사 이름으로 적절한 대체를 사용하면 메시지를 전달받을 수 있지만 최종적으로 공식 서체를 사용합니다.

대체

fallback은 글꼴에 매우 짧은 차단 기간 (100ms 이하)을 제공합니다. 대부분의 경우 권장) 및 짧은 스왑 기간 (3초 권장) (대부분의 경우) 즉, 글꼴은 첫 번째로 글꼴이 로드되지 않고 로드되자마자 글꼴이 교체됩니다. 하지만 너무 많은 시간이 지나면 페이지의 나머지 부분에 전체 기간. fallback은 본문 텍스트 등을 넣는 데 적합한 후보입니다. 사용자가 가능한 한 빨리 읽기를 시작하고 방해하고 싶지 않은 경우 새로운 글꼴이 로드되는 동안 텍스트를 이동함으로써

선택사항

선택사항은 글꼴에 매우 짧은 차단 기간 (100ms 이하)을 제공합니다. 대부분의 경우 권장됨) 및 0초 스왑 기간을 제공합니다. 대체와 마찬가지로 이 글꼴은 글꼴 다운로드가 '있으면 좋은' 경험에 꼭 중요하지는 않습니다. 선택사항 값은 브라우저에서 글꼴 다운로드를 시작할지 여부를 결정하며, 글꼴 다운로드를 시작할지 여부를 해야 할 일이라고 생각하는 내용에 따라 낮은 우선순위로 수행할 수도 있습니다 찾을 수 있습니다. 이는 사용자가 글꼴을 표시하는 것은 리소스를 사용하는 최선의 방법이 아닐 수 있습니다.

브라우저 지원

font-display은(는) 현재 실험용 웹 플랫폼 기능 플래그보다 높습니다. 현재 데스크톱 Chrome 49에서 지원되며 Android용 Opera 및 Opera에서도 제공됩니다.

데모

샘플을 확인하여 font-display 슈팅 성능을 지향하는 개발자의 경우 도구 벨트에서 유용한 도구를 사용해 보세요.