更改介面上的字型

您可以變更AEM Forms工作區中顯示的字型。 用戶介面的特定部分中使用的字型在樣式表的相應部分中定義。 您可以選擇性地變更使用者介面上的字型。

依照AEM Forms工作區自訂的一般步驟,並依您的需求,依循自訂CSS、HTML或兩者的步驟。

  1. 以現有樣式變更或新增字型系列。
  2. 變更或新增HTML元素的字型系列內嵌。
  3. 新增樣式並用於HTML元素。

例如,若要將頂端導覽列錨點文字的字型變更為Courier New,請依照下列步驟進行:

  1. 通過訪問https://'[server]:[port]'/lc/crx/de/index.jsp登錄到CRXDE Lite。

  2. 執行下列任一項作業:

    1. 若要以現有樣式變更font-family,請在newStyle.css檔案中新增下列項目: /apps/ws/css。

      #topnav a {
         font-family: "Courier New";
      }
      
    2. 若要新增HTML元素的font-family內嵌,請將/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. 若要新增定義font-family的樣式,請在新的Style.css檔案中新增下列項目:/apps/ws/css。

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

      若要新增HTML元素的font-family內嵌,請在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>
      
  3. 重新啟動工作區並清除瀏覽器快取,以便顯示變更。

change_font_before

字型自訂前的頂端導覽列

change_font_after

自訂第一個標籤的字型後的頂端導覽列

本頁內容

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