CSS Font-Display : 웹에서 글꼴 렌더링의 미래

키 테이크 아웃

CSS Font-Display Descriptor는 개발자에게로드하는 동안 글꼴이 표시되는 방법을 더 많이 제어하여 사용자 경험을 향상시키고 성능을 향상시키는 것을 목표로합니다. 디스크립터는 @font-face at-rule 내에서 작동하며 자동, 블록, 스왑, 폴백 및 선택 사항의 5 가지 가능한 값을 제공합니다. 각 값은 글꼴 로딩 및 렌더링을 처리하기위한 다른 전략을 나타냅니다. 디스크립터는 타임 라인에서 블록, 스왑 및 실패의 세 가지 기간으로 나뉩니다. 개발자가 명시 적으로 할당 할 수없는이 기간의 기간은 브라우저가 텍스트를 어떻게 렌더링 해야하는지 지시합니다. CSS Font-Display 디스크립터가 모든 브라우저에서 아직 완전히 지원되지는 않지만 웹에서 글꼴 렌더링 동작을 표준화하는 데있어 중요한 단계를 나타냅니다.

.

웹 글꼴 사용의 단점 중 하나는 사용자의 장치에서 글꼴을 사용할 수없는 경우 다운로드해야한다는 것입니다. 이는 글꼴을 사용할 수있게되기 전에 브라우저는 해당 글꼴을 사용하는 텍스트 블록의 표시를 처리하는 방법을 결정해야합니다. 그리고 사용자 경험과 인식 된 성능에 큰 영향을 미치지 않는 방식으로 그렇게해야합니다. 시간이 지남에 따라 브라우저는이 문제를 완화하기위한 몇 가지 전략을 채택했습니다. 그러나 그들은 이러한 문제를 극복하기 위해 여러 가지 기술과 해결 방법을 고안해야했던 개발자의 통제와 다른 방식 으로이 작업을 수행합니다.

.
• @font-face at-rule의 글꼴-디스플레이 디스크립터를 입력하십시오. 이 CSS 기능은 이러한 동작을 표준화하고 개발자에게 더 많은 제어를 제공하는 방법을 소개합니다. font-display 사용 Font-Display가 제공하는 다양한 기능을 자세히 살펴보기 전에 CSS에서 기능을 어떻게 사용할 수 있는지 간략하게 고려해 봅시다. 우선 글꼴-디스플레이는 CSS 속성이 아니지만 소개에서 언급했듯이 @font-face at-rule의 설명 자입니다. 이것은 다음 코드와 같이 @font-face 규칙 내에서 사용해야한다는 것을 의미합니다.
이 스 니펫에서 나는 응축 된 글꼴 Saira의 스왑 값을 정의하고있다. 사용 가능한 모든 값에 대한 키워드는 다음과 같습니다
auto
블록
• 스왑
폴백

선택 사항

글꼴 디스플레이의 초기 값은 자동입니다 이후 섹션에서는 이러한 각 값을 자세히 살펴 보겠습니다. 그러나 먼저, 브라우저가 렌더링 할 글꼴을 결정하는 데 사용하는 기간을 살펴 보겠습니다. 각 값을 논의 할 때 타임 라인의 다양한 측면과 각 값에 대해 어떻게 행동하는지 설명하겠습니다.

글꼴-디스플레이 타임 라인

이 기능의 핵심은 글꼴 디스플레이 타임 라인의 개념입니다. 요청부터 시작하여 성공적인 로딩 또는 고장으로 끝나는 글꼴 로딩 시간은 브라우저가 텍스트를 렌더링 해야하는 방법을 지시하는 3 개의 연속 기간으로 나눌 수 있습니다. 이 세 가지 기간은 다음과 같습니다.

<.> 블록 기간. 이 기간 동안 브라우저는

invisible

폴백 글꼴로 텍스트를 렌더링합니다. 요청 된 글꼴이 성공적으로로드되면 텍스트가 요청 된 글꼴로 다시 렌더링됩니다. 보이지 않는 폴백 글꼴은 텍스트의 빈 자리 표시 자 역할을합니다. 다시 렌더링이 수행되면 레이아웃 이동이 줄어 듭니다 스왑 기간. 원하는 글꼴을 아직 사용할 수 없으면 폴백 글꼴이 사용되지만 이번에는 텍스트가 표시됩니다. 다시 로딩 글꼴이 들어 오면 사용됩니다.
• <.> 실패 기간. 글꼴을 사용할 수 없으면 브라우저는 기다리지 않으며 현재 페이지 방문 기간 동안 폴백 글꼴로 텍스트가 표시됩니다. 이것이 반드시 글꼴 로딩이 중단된다는 것을 의미하지는 않습니다. 대신, 브라우저는 계속해서이를 계속하기로 결정할 수 있으므로 글꼴이 동일한 사용자가 연속적인 페이지 방문에서 사용할 준비가되도록합니다. 그러한 기간의 지속 시간을 조정하면 사용자 정의 텍스트 렌더링 전략을 구성 할 수 있습니다. 특히, 이러한 지속 시간은 다음 섹션에서 보여 주므로 무한대로 붕괴되거나 무한대로 확장 될 수 있습니다. . 그러나 이러한 지속 시간은 개발자가 명시 적으로 할당 할 수 없습니다. 이 가능성은 사양의 초기 단계에서 조사되었지만 삭제되었습니다. 대신, 이전 섹션에서 요약 된대로 대부분의 사용 사례를 처리 할 수있는 사전 정의 된 키워드 값 세트가 제공됩니다. 이 키워드 각각이 글꼴로드 및 디스플레이 프로세스를 관리하는 방법을 살펴 보겠습니다. font-display : auto
이 값은 브라우저에 브라우저에서 선택한 기본 글꼴 디스플레이 동작을 채택하도록 지시합니다. 종종이 전략은 다음 값과 유사합니다. font-display : block
• 이 값을 사용하면 짧은 블록 기간 (사양은 3 초 기간을 권장) 후 스왑 기간이 무한대로 확장됩니다. 이것은이 상황에서 실패 기간이 없음을 의미합니다.
브라우저가 요청 된 글꼴을 잠깐 기다리는 동안 보이지 않는 폴백 글꼴로 텍스트를 렌트합니다. 그 후, 글꼴을 아직 사용할 수 없으면 폴백 글꼴이 보이게됩니다. 그리고 다운로드가 완료 될 때마다 브라우저는 Wanted 글꼴로 텍스트를 다시 렌더링합니다. 당신은 다음 비디오 에서이 동작을 볼 수 있습니다.이 동작은 제목을 위해 특정 웹 글꼴을 통합 한 간단한 테스트 페이지를 사용하는 다음 비디오에서 볼 수 있습니다. 이것을 확인해 봅시다 : https://uploads.sitepoint.com/wp-content/uploads/2017/09/1508342017fontdisplay02.mp4


font-display : 폴백 이것은 실패 기간을 포함하는 첫 번째 값입니다. 매우 짧은 블록 기간 (100ms 권장) 후, 스왑 기간은 이제 짧은 기간을 갖습니다 (3s 권장). 결과적으로,이 기간이 끝날 때 요청 된 글꼴이 준비되지 않은 경우, 페이지 방문 기간 동안 폴백 글꼴을 사용하여 텍스트가 표시됩니다. 이렇게하면 사용자 경험에 어려움을 겪을 수있는 늦은 레이아웃 이동으로 페이지 방문자를 방해하지 않습니다.

다음 비디오에서는 스왑 기간의 시간 초과가 시작되기 전에 글꼴이 더 빨리로드되므로 글꼴은 예상대로 사용됩니다. https://uploads.sitepoint.com/wp-content/uploads/2017/09/1508342070fontdisplay04.mp4

위 내용은 CSS Font-Display : 웹에서 글꼴 렌더링의 미래의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!