Documentação

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

Last update: Fri Sep 19 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 apenas nos 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 nesta amostra:

  • 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 no seu perfil personalizado.

  • Incluir as seguintes linhas clientlibs em formRuntime.jsp:

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

    Hierarquia do perfil personalizado:

    /apps/hrform

    "
    └── 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

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

Em seguida, reinicie o AEM após implantar as fontes e atualizar as configurações.

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

  • 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