Titanium에서 Custom Font 사용하기 (+FontAwesome)
Titanium에서 Custom Font를 사용하는 법은 상당히 간단하다. 특히 FontAwesome 같은 아이콘 폰트 사용하면 이미지 작업 없이도 이쁜 아이콘을 편하고 빠르게 사용가능하다.
1. 폰트파일 설치
font file은 Resource/fonts 파일에 복사한다. Alloy 프로젝트의 경우 app/asset/fonts/ 나 app/lib/fonts에 저장한다. FontAwesome의 경우에는 다운받아서 압축 풀면 나오는 폰트 파일중에 fontawesome-webfont.ttf 파일을 이용하면 된다. 위치가 fonts다 font가 아니다. (이 실수로 삽질을 ㅠㅠ)
2. tiapp.xml 수정 (iOS 인경우만)
iOS 일경우 tiapp.xml 파일에 아래 코드를 수정하면 된다. Titanium Doc Guide 나와있는 info.plist 파일을 복사해서 수정하는 방법 보다 훨씬 간단하다. 참고로 이렇게 추가한경우 프로젝트를 클린하고 다시 빌드해만 확인 할 수 있었다.
<ios> <plist> <dict> <key>UIAppFonts</key> <array> <string>fonts/fontawesome-webfont.ttf</string> </array> </dict> </plist> </ios>
3. 끝. 이제부터 사용가능하다.
바로 사용이 가능하다. 한가지 주의할 점은 아래에 나와있듯이 fontFamily에 들어가는 값이 iOS와 Android의 경우 다르다. iOS는 friendly-name으로 폰트 파일을 열면 상단에 나오는 이름이고, android의 경우는 확장자를 제외한 파일명이다.
/* * Let's say you downloaded the "Spicy Rice" font from Google WebFonts. * You'd have a file named SpicyRice-Regular.ttf in your fonts directory */ var customFont = 'Spicy Rice'; // use the friendly-name on iOS if(Ti.Platform.osname=='android') { // on Android, use the "base name" of the file (name without extension) customFont = 'SpicyRice-Regular'; } var label1 = Titanium.UI.createLabel({ color:'#000', text:'I am Window 1', font:{ fontSize:40, fontFamily: customFont }, textAlign:'center', width:'auto' });
또한 FontAwesome 같은 경우는 "icon-glass": 0xf000와 같이 각 아이콘에 해당하는 string 값을 매번 찾아서 넣기 귀찮은데 k0sukey / TiIconicFont 를 이용하면 아래와 같이 간단히 사용 가능하다.
var fontawesome = require('lib/IconicFont').IconicFont({ font: 'lib/FontAwesome', ligature: false // optional }); var baloonLabel = Ti.UI.createLabel({ top: 20, right: 25, width: Ti.UI.SIZE, height: Ti.UI.SIZE, color: '#000', font: { fontSize: 100, fontFamily: fontawesome.fontfamily() }, text: fontawesome.icon('icon-comment-alt') });