사용 안내서 취소

글꼴 이벤트

  1. Adobe Fonts 사용 안내서
  2. 소개
    1. 시스템 및 구독 요구 사항
    2. 브라우저 및 OS 지원
    3. 컴퓨터에서 글꼴 추가
    4. 웹 사이트에 글꼴 추가
    5. CC Mobile에서 글꼴 추가
  3. 글꼴 라이선싱
    1. Adobe Fonts에서 추가된 글꼴
    2. Adobe Fonts의 웹 글꼴
    3. 기업 고객용 Creative Cloud
    4. 제거된 글꼴
    5. 이들 글꼴이 내 Creative Cloud 구독에 포함되지 않은 이유는 무엇입니까?
    6. Adobe Fonts에서 글꼴에 대한 라이선스를 구매하라는 메시지가 표시되는 이유는 무엇입니까?
    7. 중국에서 등록된 Adobe ID로는 Adobe Fonts를 사용할 수 없습니다.
  4. 글꼴 다운로드 및 사용하기
    1. Creative Cloud 앱에서 Adobe Fonts 사용하기
    2. 내 글꼴 관리
    3. 이미지에서 글꼴 찾기
    4. 데스크탑 애플리케이션에서 누락된 글꼴 문제 해결
    5. InDesign에서 글꼴 사용하기
    6. 글꼴 및 타이포그래피
    7. HTML5 Canvas 문서에서 웹 글꼴 사용하기
    8. InCopy에서 글꼴 사용하기
    9. Muse에서 웹 글꼴 사용하기
    10. 글꼴 파일 패키징
    11. 문제 해결 안내서: 글꼴 추가하기
    12. 추가된 글꼴이 글꼴 메뉴에 표시되지 않음
    13. “하나 이상의 글꼴을 추가할 수 없음” 또는 “동일한 이름의 글꼴이 이미 설치되어 있음”
    14. 사용하고 있는 글꼴을 제작자가 업데이트하면 어떻게 됩니까?
    15. Adobe 프로그램에서 글꼴 숨기기
  5. 웹 디자인 및 개발
    1. 웹 사이트에 글꼴 추가
    2. 문제 해결 안내서: 웹 사이트에 글꼴 추가하기
    3. 글꼴 문제 해결
    4. HTML 이메일 또는 뉴스레터에서 웹 글꼴 사용하기
    5. AMP(Accelerated Mobile Pages)에서 웹 글꼴 사용하기
    6. CSS 선택기
    7. 글꼴 표시 설정으로 웹 글꼴 성능 맞춤화
    8. 임베드 코드
    9. 동적 하위 집합 및 웹 글꼴 제공
    10. 글꼴 이벤트
    11. 내 웹 글꼴을 use.typekit.net에서 가져오는 이유는 무엇입니까?
    12. 사이트가 use.typekit.net에 연결되지 않습니다.
    13. CodePen에서 웹 글꼴 사용하기
    14. 브라우저 및 OS 지원
    15. 도메인
    16. 로컬에서 개발 시 웹 글꼴 사용하기
    17. 콘텐츠 보안 정책
    18. 웹 글꼴 인쇄하기
  6. 언어 지원 및 OpenType 기능
    1. 언어 지원 및 하위 집합
    2. OpenType 기능 사용하기
    3. CSS의 OpenType 기능에 대한 구문
  7. 글꼴 기술
    1. OpenType-SVG 색상 글꼴
    2. Ten Mincho: 버전 1.000에서 업데이트 시 중요 사항

글꼴 이벤트가 동적 하위 집합에 사용되는 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 */
}

글꼴 이벤트 클래스의 일반적인 용도는 스타일이 지정되지 않은 텍스트의 플래시(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 접근법을 선호하는 경우 글꼴 이벤트를 사용하여 모든 브라우저에서 이를 시뮬레이트할 수 있습니다. 글꼴 이벤트는 세 가지의 요소에 추가되는 클래스입니다.

  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 */
}

예를 들어 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;
}

쉽고 빠르게 지원 받기

신규 사용자이신가요?