Documentazione

Font di cui non viene eseguito il rendering corretto nei moduli HTML5 di AEM 6.5

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

Quando si esegue il rendering dei modelli XDP come moduli HTML5 in AEM 6.5 Forms, è possibile che i font non vengano visualizzati correttamente, in particolare sui computer in cui non sono installati localmente i font richiesti. Anche se i font esistono nell’archivio di CRX, il problema persiste a causa di lacune nella compatibilità e nella configurazione. Per risolvere questo problema, utilizza i font web, configura un profilo di rendering personalizzato e convalida l’impostazione tra gli ambienti.

Descrizione description

Ambiente


Prodotto: Adobe Experience Manager - Forms (AEM - Forms)
Versione: 6.5
Distribuzione: locale
Componente: rendering di moduli HTML5


Problema/Sintomi

  • I font non vengono rappresentati correttamente nei moduli HTML5 generati dai modelli XDP.
  • Il problema si verifica anche quando i font sono disponibili nell’archivio CRX.
  • I font vengono visualizzati correttamente solo sui computer in cui sono installati localmente.
  • La configurazione di Gestione caratteri Gibson non risolve il problema.

Risoluzione resolution

Per risolvere i problemi di rendering dei caratteri nei moduli HTML5, eseguire la procedura seguente:

  1. I caratteri TrueType non sono compatibili con il rendering HTML5. Utilizza font compatibili con il Web come .woff. Quindi invia questi font a CRX tramite il progetto o il pacchetto di codice.

  2. Creare un profilo personalizzato per il rendering dei moduli HTML5 seguendo le istruzioni di Creazione di un profilo personalizzato per i moduli HTML5 nella Guida utente di 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;
}

    • Fai riferimento ai font nella configurazione del profilo del renderer utilizzando @font-face regole CSS, come in questo esempio:

    • Assicurati che il profilo personalizzato includa le seguenti clientlibs:

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

    • Imposta allowProxy su true nel tuo profilo personalizzato.

    • Includi le seguenti righe clientlibs in formRuntime.jsp:

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

    • Gerarchia per profilo personalizzato:

      /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

    • Gerarchia per pacchetto di codice:

      /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. Riavvia AEM dopo aver distribuito i font e aggiornato le configurazioni.

  4. Test del rendering dei moduli in ambienti Windows e Mac e in diversi browser. Utilizza l’URL del profilo personalizzato in modo simile 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