글꼴 편집

SpreadJS는 사용자가 워크시트, 차트 및 기타 시각적 요소 전반에서 다양한 폰트 패밀리를 선택하고 적용할 수 있도록 지원합니다. 특히, 텍스트 입력 시 시스템은 자동으로 문서 테마의 기본 폰트 패밀리를 적용하여 시각적 일관성을 유지하면서도 사용자 맞춤형 커스터마이징이 가능합니다.

물론 특정 디자인 요구에 따라 테마 기본값과 다르게 설정해야 하는 경우도 있습니다. SpreadJS 디자이너 컴포넌트에서는 모든 시각적 요소에 대해 폰트 패밀리를 손쉽게 조정할 수 있습니다.

이 글에서는 주로 워크시트 셀 내 텍스트의 폰트 패밀리 설정 방법을 설명하며, 차트, 도형 등의 기타 요소에 대한 간단한 개요도 마지막에 제공합니다.

셀에 대한 설정

스프레드시트에서 폰트 패밀리를 변경하려면 HOME 리본 탭 → Fonts 그룹에 있는 Font Family Box를 사용하면 됩니다.

image.ce13b6.png

방법 1: 드롭다운 목록 선택

폰트 컨트롤 활성화
- 대상 셀에 커서를 두세요.
- Font Family 드롭다운이 보이는지 확인하세요.
선호하는 폰트 선택
- 드롭다운 화살표를 클릭하여 목록을 엽니다.
- 원하는 폰트를 찾아 선택합니다.
- 폰트 이름을 클릭합니다.

1.ca14b3.gif

방법 2: 직접 텍스트 입력

폰트 컨트롤 활성화
- 대상 셀에 커서를 두세요.
- Font Family 드롭다운이 보이는지 확인하세요.
폰트 패밀리 입력
- 입력 박스의 기본 폰트명을 지웁니다.
- 폰트 패밀리 이름을 입력합니다. (대소문자 구분 없음, 공백 자동 제거)
- Enter를 눌러 입력을 적용합니다 (드롭다운이 닫힘).

2.019543.gif

참고:
빈 입력값은 저장되거나 적용되지 않습니다.

SpreadJS는 선언형 폰트를 사용하므로, 사용자가 입력한 폰트가 목록에 없어도 적용됩니다. 실제 적용 여부는 브라우저의 폰트 렌더링 정책을 따릅니다.

3.d7eed7.gif

입력 시 폰트 자동 필터링

드롭다운이 열려 있는 상태에서 입력하면, 목록은 자동으로 입력값과 일치하는 첫 번째 폰트를 선택합니다. (폰트 이름 앞부분 기준)

4.058f29.gif

참고:
입력 직후 Enter를 누르면, 일치하는 첫 번째 폰트가 자동 선택됩니다.

개발자 구성 방법

개발자는 퍼블릭 API를 통해 폰트 드롭다운 목록을 구성할 수 있습니다.

export let FontFamily: IComboBoxCommand = {
  title: "${res.ribbon.home.fontFamily}",
  text: "Font Family",
  type: "comboBox",
  commandName: CommandNames.FontFamily,
  editable: true,    // 수동 입력 허용
  autoSelect: true   // 첫 번째 일치 항목 자동 선택
  ...
}