사용 안내서 취소

글꼴 이벤트

검색

마지막 업데이트 날짜 2022년 11월 28일

글꼴 이벤트가 동적 하위 집합에 사용되는 JavaScript 글꼴 로드에 포함되어 있습니다. 글꼴 이벤트를 사용하면 글꼴이 활성화되어 있는지, 아직 로드 중인지 또는 어떤 이유로든 사용할 수 없는지 여부에 따라 웹 페이지를 맞춤화할 수 있습니다.

CSS 글꼴 로드에는 아직 글꼴 이벤트를 사용할 수 없습니다. 웹 사이트에서 기본 또는 @import CSS 임베드 코드를 사용하는 경우 다른 JavaScript 라이브러리 포함하여 글꼴 로드를 맞춤화할 수 있습니다.

CSS의 글꼴 이벤트 사용

글꼴이 로드되거나 비활성화되어 있는 동안 페이지가 표시되는 방식을 더 잘 제어할 수 있도록 JavaScript 임베드 코드는 페이지에 글꼴이 로드될 때 트리거되는 글꼴 이벤트 세트를 제공합니다.

세 가지 기본 글꼴 이벤트가 있으며, 각 이벤트에는 해당하는 클래스 이름(괄호 안에)이 있습니다.

로드 중(.wf-loading): 웹 글꼴이 로드 중
활성(.wf-active): 웹 글꼴이 활성화됨
비활성(.wf-inactive): 웹 글꼴이 비활성화됨

이러한 이벤트와 관련된 CSS 클래스는 로드하는 동안 HTML 요소에 추가됩니다. 스타일시트에서 사용하여 글꼴이 로드될 때 페이지 스타일이 지정되는 방식을 제어할 수 있습니다. 예:

.wf-loading {
/* styles to use when web fonts are loading */
}

.wf-active {
/* styles to use when web fonts are active */
}

.wf-inactive {
/* styles to use when web fonts are inactive */
}

글꼴 이벤트 클래스의 일반적인 용도는 스타일이 지정되지 않은 텍스트의 플래시(FOUT)를 제어하고 웹 글꼴을 지원하지 않거나 해제되어 있는 브라우저의 대체 글꼴 및 스타일을 정의하는 것입니다. 브라우저, OS 및 사용자 환경 설정의 일부 조합으로 인해 페이지에서 글꼴이 비활성화될 것이므로 항상 대체 글꼴 및 스타일을 포함하는 것이 좋습니다.

JavaScript 글꼴 이벤트

이러한 글꼴 이벤트는 Typekit.load 메서드를 통해 JavaScript 콜백 후크로도 사용할 수 있습니다. Typekit.load를 호출할 때 콜백 함수가 포함된 개체를 전달할 수 있으며 이러한 콜백 함수는 로드 중에 다른 글꼴 이벤트가 발생하면 호출됩니다. 예:

<script>
  try {
    Typekit.load({
      loading: function() {
        // JavaScript to execute when fonts start loading
      },
      active: function() {
        // JavaScript to execute when fonts become active
      },
      inactive: function() {
        // JavaScript to execute when fonts become inactive
      }
    })
  } catch(e) {}
</script>

JavaScript 콜백은 글꼴이 로드되었을 때 페이드 인과 같은 것을 추가하거나 렌더링된 텍스트의 크기에 따라 프레젠테이션 레이아웃의 복잡한 수학적 크기 조정을 수행하는 데 사용할 수 있습니다.

이러한 기본 글꼴 이벤트 외에도 개별 글꼴 변형에 대한 보다 세분화된 글꼴 이벤트도 제공됩니다. 이러한 이벤트의 클래스 이름은 글꼴 패밀리 이름, 글꼴 변형 설명 및 글꼴 이벤트 이름의 조합입니다. 예를 들어 Gesta의 일반적인 두께 400을 프로젝트에 추가하면 wf-gesta-n4-loading 및 wf-gesta-n4-active와 같은 글꼴 이벤트 클래스가 생성됩니다. JavaScript 측에서는 fontloading, fontactive, fontinactive 콜백을 사용할 수 있으며 각 개별 변형에 대한 글꼴 패밀리 및 글꼴 설명을 전달할 수 있습니다.

글꼴 이벤트 사용: 스타일이 지정되지 않은 텍스트의 플래시(FOUT) 관리

각 브라우저는 자체 방식으로 웹 글꼴 로드를 처리합니다. 브라우저가 처음에 대체 글꼴로 텍스트를 표시한 다음 로드가 완료된 후 연결된 글꼴로 전환하면 스타일이 지정되지 않은 텍스트의 플래시 또는 FOUT를 사용할 수 있습니다.

글꼴이 로드 중일 때 .wf-loading의 클래스가 HTML 요소에 적용됩니다. 글꼴이 로드되면 해당 클래스가 .wf-active로 변경됩니다.따라서 스타일시트에 다음을 추가할 수 있습니다.

.wf-loading h1 {
/* styles to use while fonts are loading */
}

.wf-active h1 {
/* styles to use after fonts have loaded */
}

그런 다음 스타일을 조정하여 FOUT의 부조화를 줄일 수 있습니다. 예를 들어 플래시된 글꼴과 로드된 웹 글꼴이 같은 크기인지 확인합니다. 또는 글꼴이 완전히 로드될 때까지 텍스트를 숨길 수 있습니다. 예:

<style>
.wf-loading h1 {
font-family: &quot;droid-sans&quot;;
visibility: hidden;
}
.wf-active h1 {
visibility: visible;
}
</style>

<body>
<h1>This headline will be hidden until Droid Sans is completely loaded.</h1>
</body>

대체 글꼴 스타일 지정 섹션에는 글꼴 이벤트로 CSS 스타일을 설정하는 더 많은 예가 있습니다.

글꼴 이벤트 사용: 대체 글꼴 스타일 지정

글꼴은 이미지나 비디오처럼 웹 페이지에 에셋으로 로드됩니다. 운영 체제, 웹 브라우저, 설치된 확장 기능, 사용자 환경 설정 및 연결 속도의 조합에 따라 웹 글꼴이 로드되지 않을 수 있습니다. 이러한 경우, CSS 스택의 대체 글꼴이 대신 사용됩니다.

예를 들어 압축된 웹 글꼴을 사용할 때 대체 글꼴의 크기를 조정하여 웹 글꼴이 로드되지 않는 경우에도 레이아웃이 일관되게 유지되도록 조치할 수 있습니다. 방법은 다음과 같습니다.

.headline {
/* These fallback styles are used by default */
font-family: Arial, sans-serif;
font-size: 18px; /* Smaller size for non-condensed fallback font */
}

.wf-active .headline {
/* These styles are used when web fonts are active */
font-family: &quot;proxima-nova-extra-condensed&quot;,Arial, sans-serif;
font-size: 24px;  /* Larger size for condensed font */
}

글꼴 이벤트 사용: 동적 프로젝트를 위한 보이지 않는 텍스트의 플래시(FOIT) 시뮬레이션

기본적으로 동적 프로젝트는 스타일이 지정되지 않은 텍스트의 플래시(FOUT)를 사용하여 웹 글꼴 스타일 텍스트를 렌더링합니다. 즉, 웹 글꼴이 로드되는 동안 브라우저가 대체 글꼴을 렌더링한 다음 사용할 수 있게 되면 웹 글꼴로 전환합니다. 웹 글꼴이 다운로드되는 동안 브라우저가 텍스트를 숨긴 다음 웹 글꼴이 로드되면 웹 글꼴로 스타일이 지정된 텍스트를 표시하는 웹 글꼴 렌더링에 대한 대체 접근법과는 다릅니다. 이 접근법을 보이지 않는 텍스트의 플래시(FOIT)라고 합니다.

FOUT 접근법은 특히 느린 네트워크 연결에서 보다 즉시 사용 가능한 페이지를 만들지만 FOIT 접근법을 선호하는 경우 글꼴 이벤트를 사용하여 모든 브라우저에서 이를 시뮬레이트할 수 있습니다. 글꼴 이벤트는 세 가지의 요소에 추가되는 클래스입니다.

.wf-loading: 글꼴을 로드하는 동안 추가됨;
.wf-active: 하나 이상의 글꼴이 로드될 때 추가됨;
.wf-inactive: 로드된 글꼴이 없을 때 추가됨.

CSS에서 이러한 세 가지 클래스를 사용하여 wf-loading 클래스가 활성 상태일 때 텍스트를 숨기고 wf-active 또는 wf-inactive 클래스가 활성 상태일 때 텍스트를 표시하여 FOIT 로딩을 시뮬레이트할 수 있습니다.

.wf-loading {
/* styles to use when web fonts are loading */
}

.wf-active {
/* styles to use when web fonts are active */
}

.wf-inactive {
/* styles to use when web fonts are inactive */
}

예를 들어 h1 및 p 요소가 웹 글꼴을 사용하는 경우 이 CSS를 사용하여 로드되는 동안 글꼴을 숨깁니다.

.wf-loading h1, .wf-loading p {
visibility: hidden;
}

.wf-active h1, .wf-active p, .wf-inactive h1, .wf-inactive p {
visibility: visible;
}

쉽고 빠르게 지원 받기

신규 사용자이신가요?