更改界面上的字体 changing-the-font-on-the-interface

CAUTION
AEM 6.4已结束扩展支持,本文档将不再更新。 有关更多详细信息,请参阅 技术支助期. 查找支持的版本 此处.

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

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

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

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

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

  2. 执行下列操作之一:

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

      code language-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文件:

      code language-none
      <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 with text!/lc/apps/ws/js/runtime/templates/appnavigation.html.

    3. 要添加定义font-family的样式,请在/apps/ws/css的newStyle.css文件中添加以下内容。

      code language-css
      .myNewFontStyle a {
         font-family: "Courier New";
      }
      

      要为HTML元素添加内联的字体系列,请在apps/ws/js/runtime/templates的appnavigation.html文件中添加以下内容。

      code language-css
      <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
图: 自定义第一个选项卡的字体后显示顶部导航栏

recommendation-more-help
a6ebf046-2b8b-4543-bd46-42a0d77792da