您可以變更AEM Forms工作區中顯示的字型。 在用戶介面的特定部分中使用的字型在樣式表的相應部分中定義。 您可以選擇性地更改用戶介面上的字型。
請依照AEM Forms工作區自訂的一般步驟操作,並根據您的需求,遵循自訂CSS、HTML或兩者的步驟。
例如,要將頂部導航欄錨點文本的字型更改為「Courier New」,請執行以下步驟:
通過訪問https://'[server]:[port]'/lc/crx/de/index.jsp
登錄CRXDE Lite。
執行下列任一操作:
若要以現有樣式變更字型系列,請在位於/apps/ws/css的newStyle.css檔案中新增下列內容。
#topnav a {
font-family: "Courier New";
}
若要為HTML元素新增字型系列內嵌,請將/libs/ws/js/runtime/templates/appnavigation.html
檔案複製到/apps/ws/js/runtime/templates/appnavigation.html
。
按如下方式更新/apps/ws/js/runtime/templates/appnavigation.html檔案:
<li class="process"><a href="#" title="<%= $.t('index.header.topnav.startprocess.detail')%>" style="font-family:Courier New;" ><%= $.t('index.header.topnav.startprocess.name')%></a></li>
<li class="todo"><a href="#/todo" title="<%= $.t('index.header.topnav.todo.detail')%>" style="font-family:Courier New;" ><%= $.t('index.header.topnav.todo.name')%></a></li>
<li class="track"><a href="#/tracking" title="<%= $.t('index.header.topnav.tracking.detail')%>" style="font-family:Courier New;" ><%= $.t('index.header.topnav.tracking.name')%></a></li>
<li class="preference"><a href="#/preferences" title="<%= $.t('index.header.topnav.preferences.detail')%>" style="font-family:Courier New;" ><%= $.t('index.header.topnav.preferences.name')%></a></li>
開啟/apps/ws/js/registry.js檔案進行編輯,並將text!/lc/libs/ws/js/runtime/templates/appnavigation.html
替換為text!/lc/apps/ws/js/runtime/templates/appnavigation.html
。
要添加定義font-family的樣式,請在位於/apps/ws/css的newStyle.css檔案中添加以下內容。
.myNewFontStyle a {
font-family: "Courier New";
}
若要為HTML元素新增字型系列內嵌,請在appnavigation.html檔案中(網址為/apps/ws/js/runtime/templates)新增下列內容。
<div id="topnav" class="myNewFontStyle">
<ul>
<li class="process"><a href="#" title="<%= $.t('index.header.topnav.startprocess.detail')%>" ><%= $.t('index.header.topnav.startprocess.name')%></a></li>
<li class="todo"><a href="#/todo" title="<%= $.t('index.header.topnav.todo.detail')%>"><%= $.t('index.header.topnav.todo.name')%></a></li>
<li class="track"><a href="#/tracking" title="<%= $.t('index.header.topnav.tracking.detail')%>" ><%= $.t('index.header.topnav.tracking.name')%></a></li>
<li class="preference"><a href="#/preferences" title="<%= $.t('index.header.topnav.preferences.detail')%>" ><%= $.t('index.header.topnav.preferences.name')%></a></li>
</ul>
</div>
重新啟動工作區,並清除瀏覽器快取,讓變更可見。
字型自訂前的頂端導覽列
第一個索引標籤的字型自訂後的頂端導覽列