文档

字体在AEM 6.5 HTML5 Forms中无法正确呈现

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

在AEM 6.5 Forms中将XDP模板渲染为HTML5表单时，字体可能无法正确显示，尤其是在没有本地安装所需字体的计算机上。 即使CRX存储库中存在这些字体，但由于兼容性和配置差异，问题仍然存在。 要解决此问题，请使用Web字体，配置自定义渲染配置文件，并跨环境验证设置。

描述 description

环境


产品： Adobe Experience Manager - Forms (AEM - Forms)
版本： 6.5
部署： 内部部署
组件： HTML5表单渲染


问题/症状

  • 在从XDP模板生成的HTML5表单中，字体无法正确呈现。
  • 即使字体在CRX存储库中可用，也会出现问题。
  • 字体仅在本地安装的计算机上正确显示。
  • Gibson Font Manager配置无法解决此问题。

解决方法 resolution

要解决HTML5表单中的字体渲染问题，请执行以下步骤：

  1. TrueType字体与HTML5渲染不兼容。 使用与Web兼容的字体，如.woff。 然后，通过代码项目或包将这些字体推送到CRX。

  2. 使用《HTML 6.5用户指南》中创建HTML5表单自定义配置文件中的说明创建用于呈现AEM5表单的自定义配置文件。

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

    • 使用@font-face CSS规则引用渲染器配置文件配置中的字体，如以下示例所示：

    • 确保您的自定义配置文件包含这些clientlibs：

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

    • 在您的自定义配置文件中将allowProxy设置为​ true。

    • 在formRuntime.jsp中包含以下clientlibs行：

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

    • 自定义配置文件的层次结构：

      /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

    • 代码包的层次结构：

      /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. 在部署字体和更新配置后重新启动AEM。

  4. 跨Windows和Mac环境及不同浏览器测试表单渲染。 使用自定义配置文件URL，类似于：

    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