텍스트를 SVG로 변환

무엇을 돌려받는가

글리프마다 패스 하나. 여러분이 설정한 채우기 규칙, 채우기, 선이 함께 붙고, 글리프마다 고유 id를 주는 옵션도 있어 CSS나 JavaScript에서 글자를 개별로 지목할 수 있습니다. 단어 전체를 패스 하나로 만들고 싶다면 대신 컨투어를 용접하세요 — 커터나 아이콘 시스템이 대개 선호하는 형태입니다.

글리프 조회가 아니라 제대로 된 성형

텍스트는 브라우저가 직접 쓰는 엔진인 HarfBuzz로 성형되므로, 커닝 쌍과 합자가 적용되고 복잡한 문자 체계도 제대로 움직입니다. 아랍 문자는 이어지고, 인도계 문자 뭉치는 재배열됩니다. 가변 폰트 축과 OpenType 기능도 열려 있어, 윤곽선으로 바꾸기 전에 굵기나 스타일 세트를 맞춰둘 수 있습니다.

직접 만든 폰트 쓰기

카탈로그는 1,900개가 넘는 오픈소스 서체 패밀리를 아우르지만, 대신 여러분의 TTF나 OTF를 끌어다 놓아도 됩니다. 올린 폰트는 탭 안에서 읽히고 어디로도 전송되지 않으므로, 라이선스를 구매한 상용 서체도 여러분의 컴퓨터에 그대로 남습니다.

질문

텍스트를 그냥 <text>로 두면 안 되나요?

두 번 같은 모습으로 그려진다는 보장이 없기 때문입니다. 없는 폰트는 조용히 대체되고, 웹폰트는 요청 한 번과 스타일 없는 글자의 깜빡임을 더합니다. 패스는 고정된 지오메트리입니다 — 파일이 로고나 아이콘이거나 기계로 갈 물건이라면 언제나 그만한 값을 합니다.

텍스트가 계속 검색되고 접근 가능한가요?

윤곽선으로 바꾼 뒤에는 아닙니다. 문구는 마크업의 aria-label이나 title 요소에 담아두고, 나중 수정을 위해 편집 가능한 원본을 따로 보관하세요.

제가 라이선스를 가진 폰트를 써도 되나요?

됩니다 — TTF나 OTF를 올리세요. 브라우저 안에서 해석되므로 파일이 컴퓨터를 벗어나는 일은 없습니다. 다만 의도한 용도로 윤곽선화가 허용되는지는 라이선스를 확인하세요.