사용 안내서 취소

글꼴 이벤트

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

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

CSS의 글꼴 이벤트 사용

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

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

  1. 로드 중(.wf-loading): 웹 글꼴이 로드 중
  2. 활성(.wf-active): 웹 글꼴이 활성화됨
  3. 비활성(.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 */
}
.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 */ }
.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>
<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>
<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 */
}
.wf-loading h1 { /* styles to use while fonts are loading */ } .wf-active h1 { /* styles to use after fonts have loaded */ }
.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>
<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>
<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 */
}
.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 */ }
.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 접근법을 선호하는 경우 글꼴 이벤트를 사용하여 모든 브라우저에서 이를 시뮬레이트할 수 있습니다. 글꼴 이벤트는 세 가지의 요소에 추가되는 클래스입니다.

  1. .wf-loading: 글꼴을 로드하는 동안 추가됨;
  2. .wf-active: 하나 이상의 글꼴이 로드될 때 추가됨;
  3. .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 */
}
.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 */ }
.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;
}
.wf-loading h1, .wf-loading p { visibility: hidden; } .wf-active h1, .wf-active p, .wf-inactive h1, .wf-inactive p { visibility: visible; }
.wf-loading h1, .wf-loading p {
visibility: hidden;
}

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

쉽고 빠르게 지원 받기

신규 사용자이신가요?