アイコンフォントや文字フォントをコマンドラインで画像として出力する

3592 ワード
font フォント font テキストリンク

ユースケース

  • アイコンフォントを画像として出力したい。
  • 検索に引っかかりたくない文章を画像として出力したい。

事前準備

ImageMagickをインストールします。

brew install imagemagick

※CactuslabのOSX版バイナリをインストールするのも楽です。

作成方法

  1. 出力したいフォントをFontbookでインストールしておきます。

  2. 出力したいフォントファイルのパスを取得します。

    convert -list font

    glyphs:にパスが表示されます。

ケース1:入力が難しい文字の場合

アイコンフォントなどで、アイコンに対応する文字をキーボードから入力しずらいケースです。

  1. Fontbookを開きます。
  2. Fontbook上で出力したい文字をコピーします。
  3. 何らかのエディタにペーストしてUTF8で保存します。
  4. 以下を実行します。
convert -font '[Fonts配下のフォントのフルパス]' -pointsize [出力したいフォントサイズ] label:@[utf8のファイル名] [出力画像ファイル名].png

※ImageMagickの制限

例

GitHubのOcticonsを使う例です。

convert -font '/Users/s/Library/Fonts/octicons.ttf' -pointsize 50 label:@github.txt github.png

ケース2:入力が簡単な文字の場合

アルファベットなど入力が簡単な文字のケースです。こちらはテキストファイルを作る必要がないです。

convert -font '[Fonts配下のフォントのフルパス]' -pointsize [出力したいフォントサイズ] label:'[出力したい文字]' [出力画像ファイル名].png

例

convert -font '/System/Library/Fonts/HelveticaNeueDeskInterface.ttc' -pointsize 50 label:'Apple' apple.png

その他

convert -fontには様々なオプションがあります。以下の公式サイトにオプションの詳細が画像付きで掲載されています。

追記 (2015/1/3)

ttfフォント内の全ての文字を個別のPNG画像として出力するツールを作りました。