更改接口上的字体

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

按照AEM Forms工作区自定义的一般步骤执行操作,并根据您的要求,执行自定义CSS、HTML或同时自定义CSS和/或HTML的步骤。

  1. 以现有样式更改或添加字体系列。
  2. 更改或添加HTML元素的行中字体系列。
  3. 添加样式并将其用于HTML元素。

例如,要将顶部导航栏锚点文本的字体更改为Courier New,请执行以下步骤:

  1. 通过访问https://'[server]:[port]'/lc/crx/de/index.jsp登录CRXDE Lite。

  2. 执行下列操作之一:

    1. 要更改现有样式中的字体系列,请在newStyle.css文件(位于/apps/ws/css)中添加以下内容。

      #topnav a {
         font-family: "Courier New";
      }
      
    2. 要为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

    3. 要添加定义字体系列的样式,请在新的Style.css文件(位于/apps/ws/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>
      
  3. 重新启动工作区并清除浏览器缓存,以使更改可见。

change_font_before

自定义字体之前的顶部导航栏

change_font_after

自定义第一个选项卡的字体后的顶部导航栏

On this page

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now