文件

AEM 6.5 HTML5表單中字型無法正確呈現

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

在AEM 6.5 Forms中將XDP範本轉譯為HTML5表單時，字型可能無法正確顯示，尤其是在未在本機安裝所需字型的機器上。 即使字型存在於CRX存放庫中，由於相容性和設定差異，問題仍然存在。 若要修正此問題，請使用網頁字型、設定自訂轉譯設定檔，並跨環境驗證設定。

說明 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. 使用AEM 6.5使用手冊中建立HTML5表單的自訂設定檔中的指示，建立轉譯HTML5表單的自訂設定檔。

    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