[Titanium] fontcustomをインストールしてアイコンフォントを作成
アプリを作成する際にアイコン画像はフォントに変換した方がよさそうなので実際にやってみたときの覚書。
環境： Mac OS X 10.9.3, Titanium SDK 3.2.3.GA
前の記事の参考サイトではIconMoon AppというWebサービスを使っていたけど、Font Customというコマンドラインから利用できるソフトがあったのでこちらを利用することにした。
まずはFontForgeのインストール。Homebrewは既にインストール済み。
$ brew install fontforge ttfautohint
エラー
cairo: Unsatisfied dependency: XQuartz
Homebrew does not package XQuartz. Installers may be found at:
https://xquartz.macosforge.org
Error: An unsatisfied requirement failed this build.
リンク先からXQuartz-2.7.6.dmgをダウンロード・インストール。
再トライ
$ brew install fontforge ttfautohint
無事完了。次はfontcustomをインストール。
$ sudo gem install fontcustom
Documents/fonts/svg/にsvgファイルを置いて試してみる。
$ cd Documents/fonts/
$ fontcustom compile svg/
fontcustomフォルダに出力された。fontcustom-preview.htmlをGoogle Chromeで開くと確認出来る。
Titanium公式サイトによると「fontFamily」で指定する値は環境によって違うらしい。iOSは「PostScript name」。Androidはファイル名。
なのでフォント名を指定して出力。
$ fontcustom compile svg/ -f 'icons'
< 2015/06/24 Modified >
fontcustomを1.3.8にアップデートしたらオプションが変更になってた。
$ fontcustom compile svg/ --name=icons --output=icons
viewBoxの値がマイナスになってズレてしまう現象はillustratorでObject → Compound Path → Makeしておいて、新規作成して保存すれば直った。
Adobe Illustrator 19.0.0
TitaniumプロジェクトのResources/fontsディレクトリにコピー。SDK 3.2から自動で読み込んでくれるらしい。
$ cp icons/icons_556e7f14dfa764ce14b970af6e496f5d.ttf ../Titanium_Studio_Workspace/hoge_project/Resources/fonts/icons.ttf
ソースに書いてみる。
Ti.UI.createLabel({
text: '\uf100',
color: '#f00',
font: {
fontSize: 20,
fontFamily: 'icons'
}
}
ビルドする。一旦Cleanしないと読み込んでくれなかった。
$ titanium clean
$ titanium build --platform ios --log-level debug --target simulator --retina
createLabelのtextプロパティはpreview.htmlを見ながら次のようにする。
 → \uf100
これが分からずしばらく嵌ってた。
実装するときはCommonJSモジュール化して名前を与えるようにした方がよさそう。
それとResources/fontsにttf以外のファイルを置くと原因不明のエラーで起動できないので注意（Androidのみ）。
これでも少し嵌った。
フォントにしておくと大きさや色を調整しながら開発できるし、デバイスごとに画像を用意しなくて済むのでとっても便利！
< Related Posts >