Documentatie

Lettertypen worden niet correct weergegeven in AEM 6.5 HTML5-formulieren

Last update: Tue Oct 14 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

Bij het weergeven van XDP-sjablonen als HTML5-formulieren in AEM 6.5 Forms, worden lettertypen mogelijk niet correct weergegeven, vooral op computers waarop de vereiste lettertypen niet lokaal zijn geïnstalleerd. Zelfs als de lettertypen aanwezig zijn in de CRX-opslagplaats, blijft het probleem bestaan als gevolg van compatibiliteits- en configuratieproblemen. U kunt dit verhelpen door weblettertypen te gebruiken, een aangepast renderingprofiel te configureren en de instellingen in de verschillende omgevingen te valideren.

Beschrijving description

Omgeving

Product: Adobe Experience Manager - Forms (AEM - Forms)
Versie: 6.5
Plaatsing: op-gebouw
Component: HTML5 vormen die teruggeven

Probleem/symptomen

  • Fonts worden niet correct weergegeven in HTML5-formulieren die zijn gegenereerd op basis van XDP-sjablonen.
  • De uitgave doet zich zelfs voor wanneer lettertypen beschikbaar zijn in de CRX-opslagplaats.
  • Lettertypen worden alleen correct weergegeven op computers waarop ze lokaal zijn geïnstalleerd.
  • De configuratie van Gibson Font Manager lost het probleem niet op.

Resolutie resolution

Ga als volgt te werk om weergaveproblemen met lettertypen in HTML5-formulieren op te lossen:

  1. TrueType-lettertypen zijn niet compatibel met HTML5-rendering. Gebruik met het web compatibele lettertypen, zoals .woff . Vervolgens drukt u deze lettertypen naar CRX via uw codeproject of -pakket.

  2. Creeer een douaneprofiel voor het teruggeven van HTML5 vormen gebruikend de instructies van ​ Creërend een douaneprofiel voor HTML5 vormen ​ in AEM 6.5 Gids van de Gebruiker.

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

  • Verwijs naar de lettertypen in de configuratie van het rendererprofiel met behulp van @font-face CSS-regels, zoals in dit voorbeeld:

  • Zorg ervoor dat uw aangepaste profiel de volgende clientlibs bevat:

  • xfaforms.loadingProfile.loadingPage

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

  • Reeks allowProxy aan waar in uw douaneprofiel.

  • Neem de volgende clientlibs-regels op in formRuntime.jsp :

    "
    <ui:includeClientLib categorieën="$ {xfaLocale}, xfaforms.loadingProfile.loadingPage" />
    <ui:includeClientLib categorieën="Codebase.customfunctionscategory" />
    "

    • ​

    Hiërarchie voor douaneprofiel:

    /apps/hrform

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

    • ​

    Hiërarchie voor codepakket:

    /apps/Codebase/customclientlib

    '
    ├── css
    └── css.txt {
    ├── CharlesModern-Bold.woff
    └── CharlesModern-BoldItalic.woff
    └── CharlesModern-Cond.woff
    └── CharlesModern-CondBold.woff
    ├──}"
    ├──
    ├──
    └──

Start vervolgens AEM opnieuw nadat u de lettertypen hebt geïmplementeerd en configuraties hebt bijgewerkt.

Test de rendering van formulieren in Windows- en Mac-omgevingen en in verschillende browsers. Gebruik de URL van het aangepaste profiel, vergelijkbaar met:

  • 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