Dokumentation

Teckensnitt återges inte korrekt i AEM 6.5 HTML5-formulär

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

När XDP-mallar återges som HTML5-formulär i AEM 6.5 Forms kan teckensnitt inte visas korrekt, särskilt på datorer utan de teckensnitt som krävs installerade lokalt. Även om teckensnitten finns i CRX-databasen kvarstår problemet på grund av kompatibilitets- och konfigurationsluckor. Du kan åtgärda detta genom att använda webbteckensnitt, konfigurera en anpassad återgivningsprofil och validera konfigurationen i olika miljöer.

Beskrivning description

Miljö


Produkt: Adobe Experience Manager - Forms (AEM - Forms)
Version: 6.5
Distribution: lokal
Komponent: HTML5-formuläråtergivning


Problem/symtom

  • Teckensnitt återges inte korrekt i HTML5-formulär som genereras från XDP-mallar.
  • Problemet inträffar även när teckensnitt är tillgängliga i CRX-databasen.
  • Teckensnitt visas bara korrekt på datorer där de är installerade lokalt.
  • Konfigurationen av Gibson Font Manager löser inte problemet.

Upplösning resolution

Så här löser du problem med teckensnittsåtergivning i HTML5-formulär:

  1. TrueType-teckensnitt är inte kompatibla med HTML5-återgivning. Använd webbkompatibla teckensnitt som .woff. Skicka sedan teckensnitten till CRX via kodprojektet eller paketet.

  2. Skapa en anpassad profil för återgivning av HTML5-formulär med instruktionerna i Skapa en anpassad profil för HTML5-formulär i användarhandboken för 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;
}

    • Referera teckensnitten i konfigurationen för renderingsprofilen med @font-face CSS-regler, som i det här exemplet:

    • Se till att din anpassade profil innehåller följande klientlibs:

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

    • Ange allowProxy som true i din anpassade profil.

    • Inkludera följande rader för klientlibs i formRuntime.jsp:

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

    • Hierarki för anpassad profil:

      /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

    • Hierarki för kodpaket:

      /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. Starta om AEM när du har distribuerat teckensnitten och uppdaterat konfigurationerna.

  4. Testa formuläråtergivning i Windows- och Mac-miljöer och i olika webbläsare. Använd din anpassade profil-URL som liknar:

    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