SVG 파일 준비

SVG 파일은 텍스트이므로 메모장에서 직접 쓸 수도 있고 도구를 사용해도 좋다.
이번에는 JavaScript로 만들어 보았다.

save_svg.html (Chrome Only)
출력한 SVG 파일을 기초로 0.svg~9.svg를 메모장으로 만든다.

1.svg

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="400">
<g fill="black">
<rect x="150" y="75" width="25" height="100"></rect>
<rect x="150" y="225" width="25" height="100"></rect>
</g>
</svg>

4.svg

<svg width="160" height="320" xmlns="http://www.w3.org/2000/svg">
<g fill="black">
<polygon points="120,70 140,50 140,160, 120,150"></polygon>
<polygon points="120,170 140,160 140,270, 120,250"></polygon>
<polygon points="20,50 40,70 40,150, 20,160"></polygon>
<polygon points="20,160 40,150 120,150 140,160 120,170, 40,170"></polygon>
</g>
</svg>

WOFF로 변환

IcoMoon 을 사용하여 SVG 파일을 WOFF로 변환합니다.
오른쪽 상단의 "IcoMoon App"을 클릭하십시오.


왼쪽 상단의 "Import Icons"를 클릭하고 0.svg ~ 9.svg를 선택합니다.
Untitled Set로 가져온 10개의 이미지를 선택합니다.
오른쪽 하단의 Generate Font를 클릭합니다.


16진수 문자 코드 30~39를 입력한다.
오른쪽 하단의 "Download"를 클릭하면 iconoon.zip 파일이 출력됩니다.

사용해보기

icomoon.zip 내의 fonts\icomoon.woff를 사용한 샘플.
7seg_clock.html
7seg_clock2.html

참고

자작 WEB 아이콘 폰트 만드는 법 (무료 도구만으로 feedly 폰트 만들기)