更改界面上的字体

您可以更改在AEM Forms工作区中显示的字体。在用户界面的特定部分中使用的字体在样式表的相应部分中定义。您可以选择性地更改用户界面上的字体。

按照AEM Forms工作区自定义的一般步骤操作，并根据您的要求，执行自定义CSS、HTML或两者的步骤。

更改或添加现有样式的字体系列。
更改或添加HTML元素的内嵌字体系列。
添加样式并将其用于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元素添加内联的字体系列，请在apps/ws/js/runtime/templates的appnavigation.html文件中添加以下内容。

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