설명서AEM 6.5사용 안내서

인터페이스의 글꼴 변경 changing-the-font-on-the-interface

Last update: Wed Mar 20 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

AEM Forms 작업 영역에 표시되는 글꼴을 변경할 수 있습니다. 사용자 인터페이스의 특정 섹션에서 사용되는 글꼴은 스타일시트의 해당 섹션에서 정의됩니다. 사용자 인터페이스의 글꼴을 선택적으로 변경할 수 있습니다.

다음 AEM Forms 작업 공간 사용자 정의에 대한 일반 단계 및 요구 사항에 따라 CSS, HTML 또는 둘 모두를 맞춤화하는 단계를 따르십시오.

  1. 기존 스타일로 글꼴-패밀리를 변경하거나 추가합니다.
  2. HTML 요소에 대한 font-family 인라인을 변경하거나 추가합니다.
  3. 스타일을 추가하고 HTML 요소에 사용합니다.

예를 들어 위쪽 탐색 막대 앵커 텍스트의 글꼴을 Courier New로 변경하려면 다음 단계를 수행합니다.

  1. 에 액세스하여 CRXDE Lite에 로그인 https://'[server]:[port]'/lc/crx/de/index.jsp.

  2. 다음 중 하나를 수행하십시오.

    1. 기존 스타일의 font-family를 변경하려면 /apps/ws/css의 newStyle.css 파일에 다음을 추가하십시오.

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

    2. HTML 요소에 대해 font-family 인라인을 추가하려면 /libs/ws/js/runtime/templates/appnavigation.html 파일 위치: /apps/ws/js/runtime/templates/appnavigation.html.

      /apps/ws/js/runtime/templates/appnavigation.html 파일을 다음과 같이 업데이트합니다.

      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>

      편집할 /apps/ws/js/registry.js 파일을 열고 바꾸기 text!/lc/libs/ws/js/runtime/templates/appnavigation.html 포함 text!/lc/apps/ws/js/runtime/templates/appnavigation.html.

    3. font-family를 정의하는 스타일을 추가하려면 /apps/ws/css의 newStyle.css 파일에 다음을 추가하십시오.

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

      HTML 요소에 대해 font-family 인라인을 추가하려면 /apps/ws/js/runtime/templates의 appnavigation.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. 작업 영역을 다시 시작하고 브라우저 캐시에서 변경 사항을 지웁니다.

change_font_before

글꼴 사용자 지정 전 위쪽 탐색 막대

change_font_after

첫 번째 탭의 글꼴 사용자 지정 후 상단 탐색 막대

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