2014年6月2日月曜日

[Titanium] fontcustomをインストールしてアイコンフォントを作成

icon_convert_to_fontアプリを作成する際にアイコン画像はフォントに変換した方がよさそうなので実際にやってみたときの覚書。

環境: 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

image


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を見ながら次のようにする。

&#xf100; → \uf100

これが分からずしばらく嵌ってた。

実装するときはCommonJSモジュール化して名前を与えるようにした方がよさそう。

それとResources/fontsにttf以外のファイルを置くと原因不明のエラーで起動できないので注意(Androidのみ)。

これでも少し嵌った。

フォントにしておくと大きさや色を調整しながら開発できるし、デバイスごとに画像を用意しなくて済むのでとっても便利!

 

< Related Posts >

コメントを投稿
Related Posts Plugin for WordPress, Blogger...

Blog Archives