Cambio de la fuente en la interfaz

Puede cambiar la fuente que se muestra en el espacio de trabajo de AEM Forms. Las fuentes utilizadas en una sección específica de la interfaz de usuario se definen en la sección correspondiente de la hoja de estilo. Puede cambiar las fuentes de la interfaz de usuario de forma selectiva.

Siga los pasos genéricos para la personalización del espacio de trabajo de AEM Forms y, según sus necesidades, siga los pasos para personalizar CSS, HTML o ambos.

1. Cambie o agregue la familia de fuentes en un estilo existente.
2. Cambie o agregue la familia de fuentes en línea para el elemento HTML.
3. Añada un estilo y úselo para el elemento HTML.

Por ejemplo, para cambiar la fuente del texto del anclaje de la barra de navegación superior a Courier New, siga estos pasos:

1. Inicie sesión en el CRXDE Lite accediendo a https://[server]:[port]/lc/crx/de/index.jsp.

2. Realice una de las acciones siguientes:

   1. Para cambiar la familia de fuentes en un estilo existente, agregue lo siguiente en el archivo newStyle.css en /apps/ws/css.

      #topnav a {
         font-family: "Courier New";
      }
      

   2. Para agregar la familia de fuentes en línea para el elemento HTML, copie el archivo /libs/ws/js/runtime/templates/appnavigation.html en /apps/ws/js/runtime/templates/appnavigation.html.

      Actualice el archivo /apps/ws/js/runtime/templates/appnavigation.html de la siguiente manera:

      <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 el archivo /apps/ws/js/registry.js para editarlo y reemplace text!/lc/libs/ws/js/runtime/templates/appnavigation.html por text!/lc/apps/ws/js/runtime/templates/appnavigation.html.

   3. Para agregar un estilo que defina la familia de fuentes, agregue lo siguiente en el archivo newStyle.css en /apps/ws/css.

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

      Para agregar la familia de fuentes en línea para el elemento HTML, agregue lo siguiente en el archivo appnavigation.html en /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. Vuelva a iniciar el espacio de trabajo y borre la caché del explorador para que los cambios estén visibles.

beforeFigure:barra de navegación superior antes de la personalización de fuentes

afterFigure:barra de navegación superior después de personalizar la fuente de la primera ficha