총 게시물 62건, 최근 0 건
   
폰트 유니코드 변환기(Font unicode converter)
글쓴이 : 지용호 날짜 : 2008-12-03 (수) 18:18 조회 : 10983

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)


이형철 2008-12-03 (수) 21:21
막혔을 때 현재 기술로는 불가능합니다. 툴이 지원해 주지 않습니다.
가 아니라 필요한 것을 직접 만들어서 쓰는 그가 바로 바로
챔피온입니다.
댓글주소
조우성 2008-12-04 (목) 22:22
역시 챔피언은 다르군요..ㅋ
댓글주소
   

총 게시물 62건, 최근 0 건
번호 제목 글쓴이 날짜 조회 추천
62  [Flash 3D]토성 그리기 지용호 07-10 7684 0
61  Adobe RIA 오픈캐스트 개설! 지용호 07-10 6715 0
60  플렉스빌더 an error has occurred. see the log file 에… +3 정재원 06-06 7001 0
59  EarthBrowser : Adobe AIR 프로그램 소개 +1 지용호 02-13 8217 0
58  설 연휴 즐겁고 편히 잘 보내세요^^ 윤연식 01-23 5885 0
57  rss 리더기 비밀번호 입력 안상주 12-17 11976 0
56  [숙제] ActionScript 3.0 클래스 관계 및 설계 +2 지용호 12-16 9595 0
55  [숙제]ActionScript 3.0 객체지향프로그래밍(OOP) 5… 지용호 12-16 8860 0
54  [숙제]ActionScript 3.0 의 이벤트(Event) 지용호 12-09 9496 0
53  폰트 유니코드 변환기(Font unicode converter) +2 지용호 12-03 10984 5
52  프로젝트 게시판을 이동합니다. 이형철 11-16 8858 19
51  [Flex,Javascript] 다중 파일 업로더 (Multi file upload… +3 지용호 10-25 13353 47
50  Flex로 만든 이쁜 PocketMod +3 지용호 10-22 9406 57
49  가끔씩 잊지 않도록 글 남깁시다~~~ +4 이광우 10-16 6922 57
48  조금만 기달려 주세요... +1 윤연식 10-14 12512 52
 1  2  3  4  5  맨끝
 
Since 2001.2.7 과학기술정보통신부 등록 비영리민간단체 천문노트. Copyright All rights reserved.
단체명 : 천문노트  |    고유번호 : 101-82-15888  |    대표자명 : 김태욱, 조우성  |    주소 : 138-804 서울특별시 송파구 가락동 93 금강빌딩 7층 710호  |    전화 : 02-543-3295  |    Fax : 02-6918-6888  |    통신판매신고번호 : 종로 제01-5696호  |    개인정보관리책임자 및 사이트관리자 : 지용호