설명서

AEM 6.5 HTML5 양식에서 글꼴이 올바르게 렌더링되지 않음

Last update: Tue Sep 30 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

XDP 템플릿을 AEM 6.5 Forms에서 HTML 5 양식으로 렌더링할 때 글꼴이 올바르게 표시되지 않을 수 있습니다(특히 필요한 글꼴이 로컬에 설치되지 않은 컴퓨터에서는). CRX 저장소에 글꼴이 있어도 호환성 및 구성 차이로 인해 문제가 지속됩니다. 이 문제를 해결하려면 웹 글꼴을 사용하고, 사용자 지정 렌더링 프로필을 구성하고, 환경 간에 설정을 확인합니다.

설명 description

환경


제품: Adobe Experience Manager - Forms(AEM - Forms)
버전: 6.5
배포: 온-프레미스
구성 요소: HTML5 양식 렌더링


문제/증상

  • XDP 템플릿에서 생성된 HTML 5 양식에서는 글꼴이 올바르게 렌더링되지 않습니다.
  • 이 문제는 CRX 저장소에서 글꼴을 사용할 수 있는 경우에도 발생합니다.
  • 글꼴이 로컬에 설치된 컴퓨터에만 올바르게 표시됩니다.
  • Gibson 글꼴 관리자 구성으로 문제가 해결되지 않습니다.

해결 방법 resolution

HTML5 Forms에서 글꼴 렌더링 문제를 해결하려면 다음 단계를 수행합니다.

  1. 트루타입 글꼴은 HTML5 렌더링과 호환되지 않습니다. .woff과(와) 같은 웹 호환 글꼴을 사용합니다. 그런 다음 코드 프로젝트 또는 패키지를 통해 이러한 글꼴을 CRX에 푸시합니다.

  2. HTML 6.5 사용 안내서의 HTML5 양식에 대한 사용자 지정 프로필 만들기에 있는 지침을 사용하여 AEM5 양식을 렌더링하기 위한 사용자 지정 프로필을 만듭니다.

    code language-none 
    @font-face {
  font-family: 'Charles Modern';
  src: url( ../resources/fonts/CharlesModern-Bold.woff') format('woff ); /* add bold font here */
  font-style: normal;
  font-weight: bold;
}

@font-face {
  font-family: 'Charles Modern';
  src: url( ../resources/fonts/CharlesModern-Regular.woff') format('woff );
  font-style: normal;
  font-weight: normal;
}

@font-face {
  font-family: 'Charles Modern';
  src: url( ../resources/fonts/CharlesModern-CondBold.woff') format('woff ); /* add italics font here */
  font-style: italic;
  font-weight: bold;
}

    • 다음 샘플에서와 같이 @font-face CSS 규칙을 사용하여 렌더러 프로필 구성의 글꼴을 참조합니다.

    • 사용자 지정 프로필에 다음 clientlib이 포함되어 있는지 확인합니다.

      • xfaforms.loadingProfile.loadingPage
      • xfaforms.3rdparty, xfaforms.xfalib, xfaforms.toolbar, xfaforms.scrollnav

    • 사용자 지정 프로필에서 allowProxy을(를) true(으)로 설정합니다.

    • formRuntime.jsp에 다음 clientlibs 줄을 포함하십시오.

      code language-none 
      <ui:includeClientLib categories="${xfaLocale},xfaforms.loadingProfile.loadingPage" />
<ui:includeClientLib categories="Codebase.customfunctionscategory" />

    • 사용자 지정 프로필에 대한 계층:

      /apps/hrform

      code language-none 
      └── demo
    ├── formRuntime.jsp
    ├── html.jsp
    └── loadingProfile
          ├── css
          └── css.txt
        ├── javascript
          └── js.txt
        └── resources
        └── fonts
               ├── CharlesModern-Bold.woff
            ├── CharlesModern-BoldItalic.woff
            ├── CharlesModern-Cond.woff

    • 코드 패키지에 대한 계층:

      /apps/Codebase/customclientlib

      code language-none 
      ├── css
        └── css.txt
    ├── js
         └── js.txt
    └── resources
        └── fonts
            ├── CharlesModern-Bold.woff
                        ├── CharlesModern-BoldItalic.woff
            ├── CharlesModern-Cond.woff
                        └── CharlesModern-CondBold.woff

  3. 글꼴을 배포하고 구성을 업데이트한 후 AEM을 다시 시작합니다.

  4. Windows 및 Mac 환경과 다양한 브라우저에서 양식 렌더링을 테스트합니다. 다음과 유사한 사용자 지정 프로필 URL 사용:

    code language-none 
    http://host:port/content/xfaforms/profiles/hrform.html?contentRoot=crx:///content/dam/formsanddocuments/sample-form&template=sample-form.xdp
recommendation-more-help
3d58f420-19b5-47a0-a122-5c9dab55ec7f