TrueTypeFont(.ttf .ttc .dfont)、及びOpenTypeFont(.otf)についてまとめてみた
スマホアプリ開発に関わりそうなフォントについての知識①です
概観
なんとなーくカテゴリ分けすると下記のような感じか。
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画像の容量を軽くしたい時がある。 前から何度もやっている内容なものの、そういえばメモってなかったのでメモ。
ニーズの整理
やること
①必要なもの揃える
主にメタ情報削除用:ImageOptim
https://imageoptim.com/主に減色用:pngquant、または、ImageAlpha http://pngmini.com/
②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を作った