字体在AEM 6.5 HTML5 Forms中无法正确呈现
在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表单中的字体渲染问题，请执行以下步骤：
-
TrueType字体与HTML5渲染不兼容。 使用与Web兼容的字体，如
.woff。 然后，通过代码项目或包将这些字体推送到CRX。 -
使用《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行：“
<ui：includeClientLib categories="${xfaLocale}，xfaforms.loadingProfile.loadingPage" />
<ui：includeClientLib categories="Codebase.customfunctionscategory" />
“
-自定义配置文件的层次结构：
”/apps/hrform“
”
└── demo
├── formRuntime.jsp
├── html.jsp
└── loadingProfile
├── 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