Documentazione

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

Last update: Fri Sep 19 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 dei 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 caratteri 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;
    }

  • 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:

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

    Gerarchia per il profilo personalizzato:

    /apps/hrform

    "
    └── demo
    ├── formRuntime.jsp
    ├── html.jsp
    └── loadingProfile
    ├── css
    └── css.txt
    ├── javascript
    └── js.txt
    └── risorse
    └── font
    ├── CharlesModern-Bold.woff
    ├── CharlesModern-BoldItalic.woff
    ├── CharlesModern-Cond.woff
    "
    ​-

    Gerarchia per il pacchetto di codice:

    /apps/Codebase/customclientlib

    "
    ├── css
    └── css.9} js
    ├── js.txt
    └── risorse
    └── font
    └── CharlesModern-Bold.woff
    ├── CharlesModern-BoldItalic.woff
    ├── CharlesModern-Cond.woff
    ├── CharlesModern-CondBold.woff
    └──"

Quindi riavvia AEM dopo aver distribuito i font e aggiornato le configurazioni.

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