Dokumentation

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

Last update: Fri Sep 19 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 till teckensnitten i konfigurationen för återgivningsprofilen 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:

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

    Hierarki för anpassad profil:

    /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
    "
    ​-

    Hierarki för kodpaket:

    /apps/Codebase/customclientlib

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

Starta sedan om AEM när du har distribuerat teckensnitten och uppdaterat konfigurationerna.

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

  • 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