Alteração da fonte na interface changing-the-font-on-the-interface

CAUTION
AEM 6.4 chegou ao fim do suporte estendido e esta documentação não é mais atualizada. Para obter mais detalhes, consulte nossa períodos de assistência técnica. Encontre as versões compatíveis here.

Você pode alterar a fonte exibida no espaço de trabalho do AEM Forms. As fontes usadas em uma seção específica da interface do usuário são definidas na seção correspondente da folha de estilos. Você pode alterar as fontes na interface do usuário seletivamente.

Siga as Etapas genéricas para personalização do espaço de trabalho do AEM Forms e dependendo de suas necessidades, siga as etapas para personalizar o CSS, o HTML ou ambos.

  1. Altere ou adicione a família de fontes em um estilo existente.
  2. Altere ou adicione a família de fontes em linha para o elemento HTML.
  3. Adicione um estilo e use-o para o elemento HTML.

Como exemplo, para alterar a fonte do texto da âncora da barra de navegação superior para Courier New, siga estas etapas:

  1. Faça logon no CRXDE Lite acessando https://[server]:[port]/lc/crx/de/index.jsp.

  2. Siga uma das seguintes opções:

    1. Para alterar a família de fontes em um estilo existente, adicione o seguinte no arquivo newStyle.css em /apps/ws/css.

      code language-css
      #topnav a {
         font-family: "Courier New";
      }
      
    2. Para adicionar a família de fontes em linha para o elemento HTML, copie a variável /libs/ws/js/runtime/templates/appnavigation.html para /apps/ws/js/runtime/templates/appnavigation.html.

      Atualize o arquivo /apps/ws/js/runtime/templates/appnavigation.html da seguinte maneira:

      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>
      

      Abra o arquivo /apps/ws/js/registry.js para edição e substituição text!/lc/libs/ws/js/runtime/templates/appnavigation.html com text!/lc/apps/ws/js/runtime/templates/appnavigation.html.

    3. Para adicionar um estilo definindo a família de fontes, adicione o seguinte no arquivo newStyle.css em /apps/ws/css.

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

      Para adicionar a família de fontes em linha para o elemento HTML, adicione o seguinte no arquivo appnavigation.html em /apps/ws/js/runtime/templates.

      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. Reinicie o espaço de trabalho e limpe o cache do navegador para que as alterações fiquem visíveis.

change_font_before
Figura: Barra de navegação superior antes da personalização de fontes

change_font_after
Figura: Barra de navegação superior após personalização de fonte da primeira guia

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