AEM 6.5 HTML5表單中字型無法正確呈現
在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表單中的字型轉譯問題，請遵循下列步驟：
-
TrueType字型與HTML5轉譯不相容。 使用與Web相容的字型，例如
.woff。 接著，透過您的程式碼專案或套件，將這些字型推送至CRX。 -
使用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行：``
<ui：includeClientLib categories="${xfaLocale}，xfaforms.loadingProfile.loadingPage" />
<ui：includeClientLib categories="Codebase.customfunctionscategory" />
``
-自訂設定檔的階層：
/apps/hrform`
└── demoRuntime.jsp
├── html.jsp
├── loading設定檔
└── css
├── css.txt
└── javascript
├── js.txt
└──資源
└──字型
└── CharlesModern-Bold.woff
├── CharlesModern-BoldItalic.woff
├── CharlesModern-Cond.woff
├──"'
-
代碼包層次結構：'/apps/Codebase/customclientlib'
'
css
├── css.txt js
└── js.txt
├──資源
└──字型
└── CharlesModern-Bold.woff
└── CharlesModern-BoldItalic.woff
├── CharlesModern-Cond.woff
├── CharlesModern-CondBold.woff
├──"'
└──
在部署字型和更新設定後，請重新啟動AEM。
跨Windows和Mac環境及不同瀏覽器測試表單轉譯。 使用您的自訂設定檔URL，類似於：
http://host:port/content/xfaforms/profiles/hrform.html?contentRoot=crx:///content/dam/formsanddocuments/sample-form&template=sample-form.xdp