鮭御飯

グラフィッカ出身のディレクター時々アートディレクターな人です。備忘録的エントリーを残していきます。

TrueTypeFont（.ttf .ttc .dfont）、及びOpenTypeFont（.otf）についてまとめてみた

フォント 技術系メモ

スマホアプリ開発に関わりそうなフォントについての知識①です

概観

なんとなーくカテゴリ分けすると下記のような感じか。

f:id:SakeRice:20140930150233j:plain

  • TrueTypeFont
    Appleが中心となって作ったフォント。
    アウトラインが2次のBスプライン曲線によって描かれる。

  • PostScriptFont
    Adobeが中心となって作ったフォント。
    アウトラインが3次のBスプライン曲線によって描かれる。

  • OpenTypeFont
    AdobeとMicrosoftが中心となって作ったフォント。
    PostScriptフォントとTrueTypeフォントの技術を統合して作られ、WINとMacのOS間で互換性がある。
    拡張子はTrueTypeの流れを汲むかPostScriptの流れを汲むかで異なり、
    TrueType系だと.ttf(TrueTypeFont)
    PostScript系だと.otf(OpenTypeFont)

色々なTrueTypeの拡張子

  • .ttf（TrueTypeFont）
    一般的なTrueType

  • .ttc（TrueTypeCollection）
    中にいくつかのTrueTypeFontを含む。
    WINとの互換性あり

  • .dfont（DateForkFont）
    中にいくつかのTrueTypeFontを含む。
    MacOS専用。WINとの互換性なし
    ※詳細：Apple公式

※TrueTypeの注意点

  • MacOSで、上記載の別拡張子の同名のフォントがあった場合は、.dfontが優先して表示される。
  • .dfontや.ttcは、個別の.ttfとして分解（分割）すことができるので、どうしてもOSを跨いで使用したい場合はバラすのもありかも（詳細はググれks）。
  • プリントアウトする場合は、プリンターの多くはPostScriptFontのみしかサポートしてない場合が多いので、更に注意が必要。

使うにあたって

Macの標準フォントは.ttf。なので、Mac上での開発ではTrueTypeが中心になる。
cocos2d-xを用いた開発でも、組み込みフォントとして利用できるのは.ttfで、.otfを組み込みフォントとして使用することはできない。
一方で、別途.fntを自作し、使う場合も多い。 ※.fntの概要は以降で記載しますー。

参考リンク

大量の画像の容量削減を一括で行うメモ-減色とメタ情報削除をCUIで実行する-

技術系メモ 業務効率化

技術系エントリーです

iPhoneアプリやwebアプリを制作しているとPNG画像の容量を軽くしたい時がある。 前から何度もやっている内容なものの、そういえばメモってなかったのでメモ。

ニーズの整理

  • PNG画像の容量を少なくしたい
  • 画像軽量化と言えば、「減色」と「メタ情報の削除」の両方やりたいよ
  • 大量の画像を一括で処理したい
  • 環境はmacOSだ
  • 無料でできるのが良い

やること

①必要なもの揃える

②cd〜で、画像ファイルのある場所に移動し、コマンドラインで画像軽量化。

$ cd ここに画像パス 
$ /Applications/ImageAlpha.app/Contents/Resources/pngquant --speed 1 --force --ext .png 32 *.png; open -a imageoptim *.png

関連事項を色々ザックリ説明

  • 減色作業とかメタ情報削除とかを、画像書き出すたびに毎回やるのは超めんどくさいので、CUIと計算機に任せて自動化、効率化したかった
  • そこで、pngquantを使用して圧縮をする
  • pngquantは、CUIから使用できるので、自動化、効率化との相性がいい
  • pngquantは、ImageAlphaの内部エンジンとして使われているので、それを使う
  • ImageAlphaをインストールすると、内部ソースとしてpngquantが入っているのでそれを呼び出して実行する
  • ちなみに、pngquantだけどっかから持ってきてもOK

その他

・基本的な命令
$ pngquant --ext .png --force 256 hoge.png

--extは接尾語の指定。 --forceは上書き命令。 256などの数字は色数（2〜256）。 省略した場合は256色。

・一括処理
$ pngquant *.png

ワイルドカード「*」を使うだけ。

・imageOptimの呼び出し 　
$ pngquant open -a imageoptim *.png

imageOptimはCUIから実行できる。ステキ。 「*.png」のところにはファイル名を入れるが、一括処理したいので「*.png」とした

・指定画像のみの適用
$ pngquant hoge.png fuga.png boge.png
・変換スピードの設定
$ pngquant --speed 1 hoge.png

1がもっとも高品質。一番処理時間かかる。 10が最速。デフォルトは3。

ディザ処理の無効化
$ pngquant --nofs hoge.png

ディザ処理の無効化。 ディザ処理って何さ？⇒Photoshop とディザ処理 （Photoshop CC）

・変換品質を指定
$ pngquant --quality 100 hoge.png

※全部CUIでイケるのでCIの中に組み込んだりできるのでは？とも期待。
→現在のチームでは、デプロイ時に自動で実行できるようにしております。楽です。 ※JPGが対応できないのが痛手。JPGに対応したいときはJPEGminiというソフトがある

参考サイト：

pngquantでPNG圧縮
Macの画像圧縮アプリ、ImageOptimとImageAlphaを比較してみた
ImageAlphaのバッチ処理に感動した
画像の最適化をCLIだけで行うgrunt-imageを作った