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 las 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 utilícelo para el elemento HTML.

Por ejemplo, para cambiar la fuente del texto de 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 añadir la familia de fuentes en línea para el elemento HTML, copie el /libs/ws/js/runtime/templates/appnavigation.html a /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 reemplazarlo text!/lc/libs/ws/js/runtime/templates/appnavigation.html con text!/lc/apps/ws/js/runtime/templates/appnavigation.html.

   3. Para añadir un estilo que defina la familia de fuentes, añada lo siguiente en el archivo newStyle.css en /apps/ws/css.

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

      Para añadir la familia de fuentes en línea para el elemento HTML, añada 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 sean visibles.

Figura: Barra de navegación superior antes de la personalización de la fuente

Figura: Barra de navegación superior después de personalizar la fuente de la primera ficha

Recursos de Business.Adobe.com

Cms Cloud Mobile Forms Theme Editor Document Generation Managed Cloud Digital Asset Management