Documentation

Les polices ne s’affichent pas correctement dans les formulaires HTML 6.5 d’AEM

Last update: Fri Sep 19 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

Lors du rendu de modèles XDP sous la forme de formulaires HTML5 dans AEM 6.5 Forms, les polices peuvent ne pas s’afficher correctement, en particulier sur les machines sur lesquelles les polices requises ne sont pas installées localement. Même si les polices existent dans le référentiel CRX, le problème persiste en raison d’écarts de compatibilité et de configuration. Pour résoudre ce problème, utilisez des polices web, configurez un profil de rendu personnalisé et validez la configuration dans tous les environnements.

Description description

Environnement

Produit : Adobe Experience Manager - Forms (AEM - Forms)
Version : 6.5
Déploiement : sur site
Composant : rendu formulaires HTML5

Problème/Symptômes

  • Les polices ne s’affichent pas correctement dans les formulaires HTML5 générés à partir de modèles XDP.
  • Le problème se produit même lorsque des polices sont disponibles dans le référentiel CRX.
  • Les polices ne s’affichent correctement que sur les ordinateurs sur lesquels elles sont installées localement.
  • La configuration de Gibson Font Manager ne résout pas le problème.

Résolution resolution

Pour résoudre les problèmes de rendu des polices dans HTML5 forms, procédez comme suit :

  1. Les polices TrueType ne sont pas compatibles avec le rendu HTML5. Utilisez des polices compatibles avec le web telles que .woff. Intégrez ensuite ces polices à CRX via votre projet de code ou package.

  2. Créez un profil personnalisé pour le rendu des formulaires HTML5 à l’aide des instructions de la section Création d’un profil personnalisé pour les formulaires HTML5 du Guide de l’utilisateur d’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;
    }

  • Référencez les polices dans la configuration de votre profil de rendu à l’aide de règles CSS @font-face, comme dans cet exemple :

  • Assurez-vous que votre profil personnalisé inclut les bibliothèques clientes suivantes :

  • xfaforms.loadingProfile.loadingPage

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

  • Définissez allowProxy sur true dans votre profil personnalisé.

  • Incluez les lignes clientlibs suivantes dans formRuntime.jsp :

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

    Hiérarchie pour le profil personnalisé:

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

    Hiérarchie pour le package de code:

    /apps/Codebase/customclientlib

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

Redémarrez ensuite AEM après le déploiement des polices et la mise à jour des configurations.

Testez le rendu des formulaires dans les environnements Windows et Mac et dans différents navigateurs. Utilisez l’URL de votre profil personnalisé comme suit :

  • 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