DokumentationAEM 6.5Användarhandbok

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

Last update: Sat Jul 13 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Skapat för:

  • Användare
  • Utvecklare

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 de allmänna stegen för anpassning av AEM Forms-arbetsytan och, beroende på dina krav, följ 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 till 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 filen /libs/ws/js/runtime/templates/appnavigation.html 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 för redigering och ersättning av 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