Ändra teckensnitt i gränssnittet changing-the-font-on-the-interface

Du kan ändra vilket teckensnitt som visas på arbetsytan i AEM Forms. Teckensnitt som används i ett visst avsnitt i användargränssnittet definieras i motsvarande avsnitt i formatmallen. Du kan ändra teckensnitten i användargränssnittet selektivt.

Följ Allmänna steg för anpassning av AEM Forms arbetsyta och beroende på dina behov följer du stegen för att anpassa CSS, HTML eller båda.

  1. Ändra eller lägg till teckensnittsfamiljen i en befintlig stil.
  2. Ändra eller lägg till teckensnittsfamiljen för elementet HTML.
  3. Lägg till ett format och använd det för elementet HTML.

Om du till exempel vill ändra teckensnittet för den översta navigeringsfältets ankartext till Courier New följer du de här stegen:

  1. Logga in på CRXDE Lite med åtkomst https://'[server]:[port]'/lc/crx/de/index.jsp.

  2. Gör något av följande:

    1. Om du vill ändra font-family i en befintlig stil lägger du till följande i filen newStyle.css på /apps/ws/css.

      code language-css
      #topnav a {
         font-family: "Courier New";
      }
      
    2. Om du vill lägga till teckensnittsfamiljen för elementet HTML kopierar du /libs/ws/js/runtime/templates/appnavigation.html fil till /apps/ws/js/runtime/templates/appnavigation.html.

      Uppdatera /apps/ws/js/runtime/templates/appnavigation.html så här:

      code language-jsp
      <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>
      

      Öppna /apps/ws/js/registry.js och ersätt text!/lc/libs/ws/js/runtime/templates/appnavigation.html med text!/lc/apps/ws/js/runtime/templates/appnavigation.html.

    3. Om du vill lägga till en stil som definierar teckensnittsfamiljen lägger du till följande i filen newStyle.css på /apps/ws/css.

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

      Lägg till följande i filen appnavigation.html på /apps/ws/js/runtime/templates om du vill lägga till teckensnittsfamiljen för elementet HTML.

      code language-jsp
      <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. Starta om arbetsytan och rensa webbläsarcachen så att ändringarna syns.

change_font_before

Övre navigeringsfält före teckensnittsanpassning

change_font_after

Det övre navigeringsfältet efter teckensnittsanpassning på den första fliken

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2