프로그램상에 폰트를 포함할 때 다음과 같은 문장을 사용할 것이다.

[Embed(source='C:/WINDOWS/Fonts/ARIAL.TTF', fontName = "MyFont", mimeType = "application/x-font-truetype")]
private var font:Class;

그런데 Flash Builder 4에서 작업할 때부터 위처럼 Embed한 폰트가 적용이 되지 않았다. 사용한 True Type 폰트는 언제나 테스트할때 문제없이 동작한 것이기 때문에 왜 안되는지 의문이 들었다. Flash Builder 4의 컴파일러인 mxmlc가 버그가 있거나 다른 설정이 추가되었나 싶었지만 그렇지 않았다. 그래서 열심히 구글링해봤더니 폰트를 Embed 처리할때 embedAsCFF 속성이 추가되었다는 것을 발견하고 아래처럼 테스트 코드를 작성해봤다.

package {
	import flash.display.Sprite;
	import flash.text.TextField;
	import flash.text.TextFormat;
	import flash.text.TextFieldAutoSize;
	import flash.text.AntiAliasType;
	[SWF(width = "500", height = "240", backgroundColor = "#FFFFFF", framerate = "24")]
	public class FontTest extends Sprite {
		[Embed(source='C:/WINDOWS/Fonts/ARIAL.TTF', embedAsCFF="false", fontName = "MyFont", mimeType = "application/x-font-truetype")]
		private var font:Class;
		public function FontTest() {
			var format:TextFormat = new TextFormat();
			format.font = "MyFont";
			format.size = 30;
			format.color = 0x000000;
			var label:TextField = new TextField();
			label.embedFonts = true;
			label.autoSize = TextFieldAutoSize.LEFT;
			label.antiAliasType = AntiAliasType.ADVANCED;
			label.defaultTextFormat = format;
			label.text = "blog.jidolstar.com";
			addChild(label);
			label.rotation = 5;
		}
	}
}


여기서 embedAsCFF 속성은 도데체 뭔가? 이 전에 CFF(Compact Font Format)가 뭔지 알아야만 했다.

폰트형태는 여러가지 종류가 있다. OTF(Open Type Font)와 TTF(True Type Font)등이 있다. OpenType은 MS와 Adobe가 TrueType의 후속작으로 Cross Platform을 지원하도록 만들 파일 포멧이라고 한다. 이 OpenType에는 Glyph Outline형식에 대한 정의는 없고 TrueType, CFF, Adobe Type 1(PostScript)를 사용한다고 한다. 이 말은 OTF중에는 TrueType으로 글자모양을 정의한 폰트도 있고 CFF 또는 PostScript Font로 정의한 폰트도 있음을 의미한다.
 
OpenType과 TrueType에 대한 더욱 자세한 내용은 아래 링크를 참고하자.
http://en.wikipedia.org/wiki/OpenType
http://en.wikipedia.org/wiki/TrueType

CFF는 OpenType의 하나로서 다음 링크에 더 세세하게 설명하고 있다.
http://en.wikipedia.org/wiki/Compact_Font_Format#Compact_Font_Format

CFF에 대한 스펙은 다음 파일을 참고한다.


Flash Player 10과 Adobe AIR 1.5이상부터 TTF뿐 아니라 CFF도 지원하게 되었다. 이는 PDF와 직접적인 관계가 있는 것 같다.  그래서 폰트를 포함할때 TTF인지 CFF인지 명시할 필요에 의해 생긴 것이 embededAsCFF인듯하다. 만약 TTF를 사용한다면 위 예제처럼 embededAsCFF를 false로 지정해야한다.

필자도 Font Type에 대한 지식은 거의 없어서 난감했다. CFF를 포함하면 글꼴 렌더링시에 텍스트를 보다 쉽게 읽을 수 있으며 작은 크기에서 글꼴의 표시 품질이 향상된다고 Adobe ActionScript 3.0 가이드 문서에는 나와 있을뿐 정확히 TTF와 CFF에 대한 명확한 해석을 찾지는 못했다.

Adobe ActionScript 3.0 가이드 : 글꼴을 이용한 작업


갑자기 대두된 Font 포함문제 때문에 매우 당혹스러웠지만 그나마 해결방법이라도 찾아 다행이다. 이에 대해 정확히 기술된 한글문서를 아직 찾지 못했다. 더욱 다양한 글들이 많이 올라왔으면 한다.

이 실험은 Flash Builder 4 Beta 2에서 테스트 했으며 아래 링크로부터 Flash Builder 4를 다운받을 수 있다.
http://www.adoberia.co.kr/pds/down.html?src=text&kw=000026



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

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에서 유니코드 넣기란 여간 어려운 것이 아닐 것이다.

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

사용자 삽입 이미지



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

private function encodeUnicode( fonts:String ):String

{

       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로 만들었는데... 사용할 폰트가 제한적이라 이 프로그램을 유용하게 사용했다.

왜 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://starpl.com


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

+ Recent posts