글꼴 이벤트가 동적 하위 집합에 사용되는 JavaScript 글꼴 로드에 포함되어 있습니다. 글꼴 이벤트를 사용하면 글꼴이 활성화되어 있는지, 아직 로드 중인지 또는 어떤 이유로든 사용할 수 없는지 여부에 따라 웹 페이지를 맞춤화할 수 있습니다.
CSS 글꼴 로드에는 아직 글꼴 이벤트를 사용할 수 없습니다. 웹 사이트에서 기본 또는 @import CSS 임베드 코드를 사용하는 경우 다른 JavaScript 라이브러리 포함하여 글꼴 로드를 맞춤화할 수 있습니다.
CSS의 글꼴 이벤트 사용
글꼴이 로드되거나 비활성화되어 있는 동안 페이지가 표시되는 방식을 더 잘 제어할 수 있도록 JavaScript 임베드 코드는 페이지에 글꼴이 로드될 때 트리거되는 글꼴 이벤트 세트를 제공합니다.
세 가지 기본 글꼴 이벤트가 있으며, 각 이벤트에는 해당하는 클래스 이름(괄호 안에)이 있습니다.
- 로드 중(.wf-loading): 웹 글꼴이 로드 중
- 활성(.wf-active): 웹 글꼴이 활성화됨
- 비활성(.wf-inactive): 웹 글꼴이 비활성화됨
이러한 이벤트와 관련된 CSS 클래스는 로드하는 동안 HTML 요소에 추가됩니다. 스타일시트에서 사용하여 글꼴이 로드될 때 페이지 스타일이 지정되는 방식을 제어할 수 있습니다. 예:
글꼴 이벤트 클래스의 일반적인 용도는 스타일이 지정되지 않은 텍스트의 플래시(FOUT)를 제어하고 웹 글꼴을 지원하지 않거나 해제되어 있는 브라우저의 대체 글꼴 및 스타일을 정의하는 것입니다. 브라우저, OS 및 사용자 환경 설정의 일부 조합으로 인해 페이지에서 글꼴이 비활성화될 것이므로 항상 대체 글꼴 및 스타일을 포함하는 것이 좋습니다.
JavaScript 글꼴 이벤트
이러한 글꼴 이벤트는 Typekit.load 메서드를 통해 JavaScript 콜백 후크로도 사용할 수 있습니다. Typekit.load를 호출할 때 콜백 함수가 포함된 개체를 전달할 수 있으며 이러한 콜백 함수는 로드 중에 다른 글꼴 이벤트가 발생하면 호출됩니다. 예:
JavaScript 콜백은 글꼴이 로드되었을 때 페이드 인과 같은 것을 추가하거나 렌더링된 텍스트의 크기에 따라 프레젠테이션 레이아웃의 복잡한 수학적 크기 조정을 수행하는 데 사용할 수 있습니다.
이러한 기본 글꼴 이벤트 외에도 개별 글꼴 변형에 대한 보다 세분화된 글꼴 이벤트도 제공됩니다. 이러한 이벤트의 클래스 이름은 글꼴 패밀리 이름, 글꼴 변형 설명 및 글꼴 이벤트 이름의 조합입니다. 예를 들어 Gesta의 일반적인 두께 400을 프로젝트에 추가하면 wf-gesta-n4-loading 및 wf-gesta-n4-active와 같은 글꼴 이벤트 클래스가 생성됩니다. JavaScript 측에서는 fontloading, fontactive, fontinactive 콜백을 사용할 수 있으며 각 개별 변형에 대한 글꼴 패밀리 및 글꼴 설명을 전달할 수 있습니다.
글꼴 이벤트 사용: 스타일이 지정되지 않은 텍스트의 플래시(FOUT) 관리
각 브라우저는 자체 방식으로 웹 글꼴 로드를 처리합니다. 브라우저가 처음에 대체 글꼴로 텍스트를 표시한 다음 로드가 완료된 후 연결된 글꼴로 전환하면 스타일이 지정되지 않은 텍스트의 플래시 또는 FOUT를 사용할 수 있습니다.
글꼴이 로드 중일 때 .wf-loading의 클래스가 HTML 요소에 적용됩니다. 글꼴이 로드되면 해당 클래스가 .wf-active.로 변경됩니다. 따라서 스타일시트에 다음을 추가할 수 있습니다:
그런 다음 스타일을 조정하여 FOUT의 부조화를 줄일 수 있습니다. 예를 들어 플래시된 글꼴과 로드된 웹 글꼴이 같은 크기인지 확인합니다. 또는 글꼴이 완전히 로드될 때까지 텍스트를 숨길 수 있습니다. 예:
대체 글꼴 스타일 지정 섹션에는 글꼴 이벤트로 CSS 스타일을 설정하는 더 많은 예가 있습니다.
글꼴 이벤트 사용: 대체 글꼴 스타일 지정
글꼴은 이미지나 비디오처럼 웹 페이지에 에셋으로 로드됩니다. 운영 체제, 웹 브라우저, 설치된 확장 기능, 사용자 환경 설정 및 연결 속도의 조합에 따라 웹 글꼴이 로드되지 않을 수 있습니다. 이러한 경우, CSS 스택의 대체 글꼴이 대신 사용됩니다.
예를 들어 압축된 웹 글꼴을 사용할 때 대체 글꼴의 크기를 조정하여 웹 글꼴이 로드되지 않는 경우에도 레이아웃이 일관되게 유지되도록 조치할 수 있습니다. 방법은 다음과 같습니다.
글꼴 이벤트 사용: 동적 프로젝트를 위한 보이지 않는 텍스트의 플래시(FOIT) 시뮬레이션
기본적으로 동적 프로젝트는 스타일이 지정되지 않은 텍스트의 플래시(FOUT)를 사용하여 웹 글꼴 스타일 텍스트를 렌더링합니다. 즉, 웹 글꼴이 로드되는 동안 브라우저가 대체 글꼴을 렌더링한 다음 사용할 수 있게 되면 웹 글꼴로 전환합니다. 웹 글꼴이 다운로드되는 동안 브라우저가 텍스트를 숨긴 다음 웹 글꼴이 로드되면 웹 글꼴로 스타일이 지정된 텍스트를 표시하는 웹 글꼴 렌더링에 대한 대체 접근법과는 다릅니다. 이 접근법을 보이지 않는 텍스트의 플래시(FOIT)라고 합니다.
FOUT 접근법은 특히 느린 네트워크 연결에서 보다 즉시 사용 가능한 페이지를 만들지만 FOIT 접근법을 선호하는 경우 글꼴 이벤트를 사용하여 모든 브라우저에서 이를 시뮬레이트할 수 있습니다. 글꼴 이벤트는 세 가지의 요소에 추가되는 클래스입니다.
- .wf-loading: 글꼴을 로드하는 동안 추가됨;
- .wf-active: 하나 이상의 글꼴이 로드될 때 추가됨;
- .wf-inactive: 로드된 글꼴이 없을 때 추가됨.
CSS에서 이러한 세 가지 클래스를 사용하여 wf-loading 클래스가 활성 상태일 때 텍스트를 숨기고 wf-active 또는 wf-inactive 클래스가 활성 상태일 때 텍스트를 표시하여 FOIT 로딩을 시뮬레이트할 수 있습니다.
예를 들어 h1 및 p 요소가 웹 글꼴을 사용하는 경우 이 CSS를 사용하여 로드되는 동안 글꼴을 숨깁니다.
