DocumentaçãoAEM 6.5Guia do usuário

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

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Aplica-se a:
  • Experience Manager 6.5

Criado para:

  • Usuário
  • Desenvolvedor

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. É possível 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 seus requisitos, siga as etapas para personalizar CSS, HTML ou ambos.

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

Por exemplo, para alterar a fonte do texto de â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 o arquivo /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-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>

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

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

change_font_before

Barra de navegação superior antes da personalização da fonte

alterar_fonte_após

Barra de navegação superior após a personalização da primeira guia

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