서체 ​

설명 ​

typeface() 는 문단의 글꼴 갈래를 고릅니다 — 산세리프 · 세리프 · 고정폭 셋입니다. 버튼을 누르면 각 글꼴로 그려진 견본판이 뜨고, 거기서 하나를 고릅니다.

• 고르는 것은 글꼴 한 벌의 이름(Noto Sans)이 아니라 CSS 가 generic family 라 부르는 갈래입니다. 이 wing 은 글꼴 이름을 들고 있지 않고, 실제 글꼴은 호스트가 토큰(token)에 얹습니다 — 아래 글꼴 지정하기.
• 태그가 아니라 블록 속성(block attribute) data-nabi-typeface 입니다. 정렬·드롭 캡과 같은 자리라 한 문단에 함께 걸 수 있습니다.
• 셋이 한 속성을 나눠 쓰므로 서로 배타적입니다. 세리프를 켜면 고정폭이 꺼지고, 같은 것을 다시 누르면 속성이 떨어져 기본값인 산세리프로 돌아갑니다.
• 문단에만 걸립니다. 제목·표 칸·리스트 항목에서는 툴바에 버튼이 뜨지 않고, 그런 자리에 속성이 붙어 들어와도 필터(filter)가 떼어 냅니다.
• 코드 블록은 서체를 따르지 않습니다. <pre> 는 문단의 형제라 문단 속성이 상속될 자리가 아니고, 고정폭은 코드 wing 이 자기 시트(stylesheet)에서 겁니다.
• 속성이 그대로 나가고 그대로 들어옵니다. 값 목록과 속성 이름은 TYPEFACES · TYPEFACE_ATTR 상수로도 나갑니다.

글꼴 지정하기 ​

갈래 셋은 각각 토큰 하나를 참조합니다.

nabi.css 는 이 셋의 기본값을 편집기 껍데기(.nabi)와 떠 있는 상자(.nabi-overlay), 그리고 홀로 선 문서 뿌리(.nabi-note)에 직접 선언합니다. 엘리먼트에 직접 붙은 선언은 상속값을 이기므로 :root 에만 적은 값은 편집기 안까지 닿지 않습니다. 갈아 끼울 자리도 같은 셋이고, 클래스를 한 겹 겹쳐 두면 어느 시트가 먼저 실리는지에 결과가 달라지지 않습니다.

.nabi.nabi,
.nabi-overlay.nabi-overlay,
.nabi-note.nabi-note {
  --nabi-font: 'Noto Sans KR', 'Noto Sans', system-ui, sans-serif;
  --nabi-font-serif: 'Noto Serif KR', 'Noto Serif', Georgia, serif;
  --nabi-font-mono: 'Noto Sans Mono', ui-monospace, monospace;
}

편집기의 기본 글꼴은 .nabi 가 --nabi-font 를 쓰고 안쪽이 상속받아 산세리프가 됩니다. 반면 저장값을 에디터 없이 그릴 때는 .nabi-note 가 본문 글꼴을 정하지 않으므로, 속성이 없는 문단은 호스트 페이지의 글꼴로 보이고 시트는 서체가 걸린 문단에만 글꼴을 겁니다.

데모 ​

npm install nabi-note

import { nabi } from 'nabi-note'
import 'nabi-note/style.css'

nabi.create('#editor', {
  wings: [],
  locale: 'ko',
  onChange: (html) => 저장(html),
})