icon font 만들기

예전에 어디 돌아다니다가 fico font 본적이 있다.
그런데 그 font를 내가 만들수도 있다는거..

[필요한 것들]
1. high logic font creator 라고 하는 프로그램
2. 일러스트레이터
3. 새로 만들고 싶은 icon (반드시 vactor로 되어있어야 함)


fontcreator 프로그램

 
font creator를 열고 빈화면에 마우스를 올린 후 오른쪽 클릭하면 add를 클릭하여 폰트를 추가할수가 있따.
폰트 설정 그런거는 너무 어려우니까, 기존에 웹에서 사용되고있는 다른 유명한 font를 보고 따라하거나 수정해서 save as 하는 식으로 하는게 편하다.

설정, 사이즈 뭐 그런거는 어디서 보냐면,
메뉴의 format-setting 에서 볼수있다.
tab 마다 확인하고 스크린캡처해서 내 폰트 설정에도 적용하면 될거임.
나는 f*c* font 를 따라함 (dafont 같은 무료 사이트 들어가도 icon font는 널렸다. 그거 font- creator로 가져와서 수정, 추가할수가 있따)

자 이제 새로운 icon을 font로 만들려면 원하는 vactor 이미지가 있어야 한다.

illustrator 에서 원하는 vactor 이미지를 복사한다.

font creator 프로그램에 빈화면에 마우스를 올리고 오른쪽 클릭하면 add가 나온다. 그걸 클릭해서 빈 폰트를 만든다.
 

저 빈폰트를 더블클릭하면 편집할수 있는 grid 화면이 나온다.
거기에다가 아까 illustror 에서 복사했던 고양이 vactor를 붙여넣기 한다.
 

고양이가 뿅하고 폰트안으로 들어온게 보인다.
 
고양이를 복사할때 생각해야 할점이,
font에는 기준선이 있다.  
baseline, x-height, 등등 저 그리드 안에 기준선들이 있는데, 일일이 설명하고싶지만 나도 이게 먼지 잘 모른다.
단 기존에 있던 다른 폰트랑 비교하면서 기준선과 크기를 맞춰서 통일성을 유지하자. (보통 가로는 baseline에 맞추고 세로는 0부터 시작해서 기준을 삼고, 만약 폰트 너비가 1000이고 양쪽에 공백이 생기면 가운대로 정렬해준다)

요렇게 하면 폰트가 완성되는건가요?

절대 아니다.

폰트box 마다 자세히보면 알수있지만 box 위에 이상한 암호 이름들이 있다 $0032 -- 이런것들..
font 마다 고유 매핑 value가 있따. 

예) f 의경우 $0066

위에 기존에 있는 애들이 쓰고 있는 폰트랑 겹치지 않게 뭐 특수문자 쪽으로 해서 하나 추가해보자.
보니까 9에 해당하는 value가 없어서 이걸로 결정

font value 따오려면 값을 알아야 하니까 test용으로 폰트하나를 만들어서 9 에 해당하는 value 값을 복사 ($0039)

해당폰트에 오른쪽 클릭 property-general 옆에 mapping tab

복사한 value 값을 고양이 폰트에 넣어보자

고양이 폰트에 오른쪽 클릭 --> property 메뉴에서 mapping tab
아까 복사한 value값을 붙여넣기 한 후 add 버튼을 누른다. 

[font 추가 완료]