함께 만드는 별빛 세상, 천문노트 · Since 2001

폰트 유니코드 변환기(Font unicode converter)

지용호 2008-12-03 (수) 18:18 11555 2
목록
이전글 다음글

웹 아카이브(2020-06-01 기록)에서 복원한 글입니다. 일부 이미지나 첨부파일이 빠져 있을 수 있습니다.

Flex나 Flash로 개발 결과물안에 폰트를 포함시켜야하는 경우를 많이 경험해봤으리라 생각한다.

폰트를 포함(Embed)한다는 것은 시스템 폰트를 사용하지 않고 프로그램안에 폰트를 내장해서 좀더 세밀하게 폰트를 제어할 수 있게 하기 위함이다. 가령, 폰트의 안티알리어싱, 회전, 투명도 조정 등을 위해서는 반드시 프로그램안에 해당 폰트를 내장해야한다.

폰트를 포함할때 가장 큰 문제점은 프로그램 용량이 너무 커진다는 것이다.
이럴때 보통 동적으로 로딩하는 방법을 통해 프로그램 자체 크기 용량을 줄일 수 있다.

그럼, 쓰여질 폰트가 제한적일때는 어떻게 할까?
가령, 폰트안에 숫자만 사용할 것이라면 그것만 뽑아내서 사용할 수 있을 것이다.
사용할 폰트가 제한적이라면 프로그램 크기를 줄이기 위해서라도 반드시 수행해야할 것이다.

Flash에서는 이것을 아주 쉽게 할 수 있다.
하지만 Flex에서 이런 작업을 하기에 여간 불편한것이 아니다.
왜 그런지 살펴보자.

Flex에서 폰트를 포함하기 위해서 CSS의 @font-face 또는 ActionScript3에서 Embed 메타데이타 태그를 이용하면 된다.

즉,

@font-face
{
src:systemFont("돋움");
fontFamily: myFontFamily;
advancedAntiAliasing: true;
unicodeRange : U+c0ac,U+c790,U+cc98;
}

또는


[Embed(source="../assets/돋움.ttf",fontName='MyFont',
mimeType='application/x-font', unicodeRange='U+c0ac,U+c790,U+cc98')]
private var font1:Class;

이다.

상단은 시스템 폰트를 포함 방법, 아래는 지정된 폰트를 포함하는 방법을 사용하고 있지만 어쨌든 둘다 어렵지 않게 사용할 수 있다.

둘다 unicodeRange 속성을 가지고 있다. 여기에 입력된 값은  특정문자에 대한 유니코드(unicode)값이다.
숫자면 숫자, 문자면 문자에 대한 유니코드값을 이곳에 넣어주어야 지정된 폰트만 프로그램안에 포함할 수 있는 것이다.

저 유니코드 값을 넣어주어야하는데 당신은 저걸 다 외우고 있는가?
"안녕하세요" 만 쓴다고 하자.
그럼 이것에 대한 유니코드값은 "U+c548,U+b155,U+d558,U+c138,U+c694,U+2e"이다.
이 값을 모른다면 Flex에서 유니코드 넣기란 여간 어려운 것이 아닐 것이다.

본인도 이것때문에 어떻게 할까 고민하다가 폰트 유니코드 변환기를 만들어서 사용하면 되겠다 싶어서 하나 만들었다.

사용자 삽입 이미지
다운로드 : http://blog.jidolstar.com/web_example/4 ··· rter.swf


이 프로그램의 핵심 함수는 다음과 같다. 의외로 간단하다. ^^;;;

private function encodeUnicode( fonts:String ):String_?xml_:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />

{

       var fontUnicodes:String = "";

       var length:int = fonts.length;

       for( var i:int = 0; i < length; i++ )

       {

             var char:String = fonts.substr( i, 1 );

             fontUnicodes += "U+"+char.charCodeAt(0).toString(16)+",";

       }           

       return fontUnicodes;      

}     

아래 스타플 "내별위젯"도 그렇게 만들었다.
회사에 Flasher가 없어서... 전부 ActionScript3로 만들었는데... 사용할 폰트가 제한적이라 이 프로그램을 유용하게 사용했다.

 

 

 이런 제한적 폰트 사용은 천문노트에 있는 별자리판(http://astronote.org/board/?idx=19490&job=note&menu=7252)에도 응용될 수 있다.



왜 Flex로 하지? 어렵게 ActionScript 3로 했는가? 라고 반문하실 수 있겠다. 사실 Flex는 쓰기 편하지만 덩치가 크다. 위젯과 같은 작은 프로그램을 만들기 위해 덩치큰 Flex를 사용하는 것은 별로 바람직하지 못할때가 많다. 왜냐하면 결과물의 용량이 커지기 때문이다. 위젯의 경우 Flash를 할 수 있다면 Flash로 제작하자. Enterprise급 프로그램이라면 Flex로 만들면 되겠다.

 

 


 

Flex 하시는 분들도 이제 폰트 Embed 범위지정 쉽게 해요.



 

관련내용

Setting character ranges
[Flex, AIR] 프로그램 크기를 줄여보자 2 - 폰트(font) 동적로드 또는 문자범위지정
[Flex, Flash] 폰트(font) Embed의 이점과 제한점
[Flex] 폰트를 런타임(run time)시 동적으로 불러와 적용하는 방법

 

 

글쓴이 : 지돌스타(http://blog.jidolstar.com/414)

댓글 2

이형철2008-12-03 21:21

막혔을 때 현재 기술로는 불가능합니다. 툴이 지원해 주지 않습니다.
가 아니라 필요한 것을 직접 만들어서 쓰는 그가 바로 바로
챔피온입니다.

조우성2008-12-04 22:22

역시 챔피언은 다르군요..ㅋ

로그인하면 댓글을 쓸 수 있습니다.

Adobe Flex/AIR 자유천문프로그램 제작 프로젝트

총 62건
글쓰기