Dokumentation

Schriftarten werden in AEM 6.5 HTML5 Forms nicht korrekt gerendert

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

Beim Rendern von XDP-Vorlagen als HTML5-Formulare in AEM 6.5 Forms können Schriftarten möglicherweise nicht korrekt angezeigt werden - insbesondere auf Computern, auf denen die erforderlichen Schriftarten nicht lokal installiert sind. Selbst wenn die Schriftarten im CRX-Repository vorhanden sind, besteht das Problem aufgrund von Kompatibilitäts- und Konfigurationslücken weiter. Um dies zu beheben, verwenden Sie Webfonts, konfigurieren Sie ein benutzerdefiniertes Renderprofil und überprüfen Sie die Einrichtung in allen Umgebungen.

Beschreibung description

Umgebung


Produkt: Adobe Experience Manager - Forms (AEM - Forms)
Version: 6.5
Bereitstellung: On-Premise
Komponente: Rendern von HTML5-Formularen


Problem/Symptome

  • Schriftarten werden in HTML5-Formularen, die aus XDP-Vorlagen generiert wurden, nicht korrekt dargestellt.
  • Das Problem tritt auch dann auf, wenn Schriftarten im CRX-Repository verfügbar sind.
  • Schriftarten werden nur auf Computern korrekt angezeigt, auf denen sie lokal installiert sind.
  • Die Konfiguration von Gibson Font Manager löst das Problem nicht.

Auflösung resolution

Gehen Sie wie folgt vor, um Probleme beim Rendern von Schriftarten in HTML5-Formularen zu beheben:

  1. TrueType-Schriftarten sind nicht mit dem HTML5-Rendering kompatibel. Verwenden Sie Web-kompatible Schriftarten wie .woff. Übertragen Sie diese Schriftarten dann über Ihr Code-Projekt oder -Paket in CRX.

  2. Erstellen Sie ein benutzerdefiniertes Profil für die Wiedergabe von HTML5-Formularen anhand der Anweisungen unter Erstellen eines benutzerdefinierten Profils für HTML5 im Benutzerhandbuch zu 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;
}

    • Referenzieren Sie die Schriftarten in Ihrer Renderer-Profilkonfiguration mithilfe @font-face CSS-Regeln, wie in diesem Beispiel gezeigt:

    • Stellen Sie sicher, dass Ihr benutzerdefiniertes Profil die folgenden Client-Bibliotheken enthält:

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

    • Legen Sie allowProxy in benutzerdefinierten Profil auf true“ fest.

    • Schließen Sie die folgenden Clientlibs-Zeilen in formRuntime.jsp ein:

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

    • Hierarchie für benutzerdefiniertes 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

    • Hierarchie des Code-Pakets:

      /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. Starten Sie AEM neu, nachdem Sie die Schriftarten bereitgestellt und die Konfigurationen aktualisiert haben.

  4. Testen Sie das Rendern von Formularen in Windows- und Mac-Umgebungen und verschiedenen Browsern. Verwenden Sie Ihre benutzerdefinierte Profil-URL ähnlich wie:

    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