미리보기

위에서 폰트를 고른 뒤, 쓰기 방향·글자 크기·자간·행간을 바꿀 수 있다. 가운데 글 상자를 클릭하면 문장을 직접 고칠 수 있다.

글리프

폰트에 들어 있는 글자를 구역별로 본다. 왼쪽에 마우스를 올리면 글자가 크게 보이고, 오른쪽 목록에서 누르면 그 글자가 미리보기 칸에 들어간다. 〈 〉로 구역을 넘긴다.

폰트 추가

fonts 배열에 넣는다. 파일은 assets/fonts/, name은 목록에 보일 이름, url은 경로. woff·woff2 권장.

const fonts = [
  { name: "폰트 이름", url: "assets/fonts/폰트파일.woff" },
  { name: "다른 폰트", url: "assets/fonts/다른폰트.woff" }
];

예시 문장

sampleText를 바꾸면 처음 뜰 때 보이는 문장이 바뀐다.

const sampleText = `원하는 문장을 넣으세요.`;

처음 값

initialSettings: textDirection "0" 가로 "1" 세로, fontSize px, letterSpacing 자간, lineHeight 행간.

const initialSettings = {
  textDirection: "0",
  fontSize: 30,
  letterSpacing: 0,
  lineHeight: 1.5
};

글리프 구역

glyphs에 title과 characters 배열을 넣어 구역을 만든다.

const glyphs = {
  hangul: { title: "한글", characters: ["가","나","다"] },
  english: { title: "영문", characters: ["A","B","C"] }
};