Documentação

Fontes não são renderizadas corretamente nos formulários do AEM 6.5 HTML5

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

Ao renderizar modelos XDP como formulários do HTML5 no AEM 6.5 Forms, as fontes podem deixar de ser exibidas corretamente, especialmente em computadores sem as fontes necessárias instaladas localmente. Mesmo que as fontes existam no repositório do CRX, o problema persiste devido a falhas de compatibilidade e configuração. Para corrigir isso, use fontes da Web, configure um perfil de renderização personalizado e valide a configuração entre ambientes.

Descrição description

Ambiente


Produto: Adobe Experience Manager - Forms (AEM - Forms)
Versão: 6.5
Implantação: local
Componente: renderização de formulários HTML5


Problema/Sintomas

  • As fontes não são renderizadas corretamente nos formulários HTML5 gerados a partir de modelos XDP.
  • O problema ocorre mesmo quando as fontes estão disponíveis no repositório do CRX.
  • As fontes são exibidas corretamente somente em computadores em que estão instaladas localmente.
  • A configuração do Gibson Font Manager não resolve o problema.

Resolução resolution

Para resolver problemas de renderização de fonte em formulários HTML5, siga estas etapas:

  1. As fontes TrueType não são compatíveis com a renderização HTML5. Usar fontes compatíveis com a Web, como .woff. Em seguida, envie essas fontes para o CRX por meio do projeto ou pacote de código.

  2. Crie um perfil personalizado para renderizar formulários HTML5 usando as instruções de Criação de um perfil personalizado para formulários HTML5 no Guia do Usuário do AEM 6.5.

    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;
}

    • Referencie as fontes na configuração do perfil do renderizador usando @font-face regras CSS, como neste exemplo:

    • Certifique-se de que o perfil personalizado inclua estas clientlibs:

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

    • Defina allowProxy como true em seu perfil personalizado.

    • Incluir as seguintes linhas clientlibs em formRuntime.jsp:

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

    • Hierarquia do perfil personalizado:

      /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

    • Hierarquia do pacote de código:

      /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. Reinicie o AEM após implantar as fontes e atualizar as configurações.

  4. Teste a renderização do formulário em ambientes Windows e Mac e navegadores diferentes. Use o URL do perfil personalizado semelhante a:

    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