Appleカラーフォント（sbix）の作り方

原文: Creating an Apple color font (sbix)
チュートリアル
カラー
Rainer Erich Scheichelbauer著
en es fr zh
2022年7月20日 2014年10月30日公開

MacやiPhoneの絵文字フォントがどのように機能するのか、不思議に思ったことはありませんか？その絵は、フォントに埋め込まれたカラーのビットマップ画像に他なりません。

「Appleスタイル」のカラーフォントでは、ビットマップ画像がフォントファイル内のいわゆるsbixテーブルに埋め込まれています。各グリフには、さまざまなサイズの複数の画像を割り当てることができます。これにより、それを表示するデバイスが最も適切な解像度を選択できます。

注

sbixテーブルはAppleによって開発され、長い間主にMacやその他のAppleデバイスで使用されてきました。この技術が初めて広く使われたのは、iPhoneの絵文字という形でした。そのため、この技術を使用したフォントは、時折「Appleカラーフォント」や「iColorフォント」など、それに類する名前で呼ばれることがあります。

サイズバリエーションを準備する
1. プロのヒント
字幅を設定する
「iColor」レイヤーを作成する
1. プロのヒント
2. 旧バージョン
字幅、スケール、位置を制御する
1. 注
縦のメトリクス
1. 書き出し
同等のSVGテーブル
Photoshopでのsbix
sbixのサポート状況
便利なスクリプト
関連記事

サイズバリエーションを準備する

通常、sbixフォントはPortable Network Graphic（PNG）形式を利用します。JPEGやTIFFも問題なく動作します。Appleのオリジナルの仕様書ではPDFも許可されていましたが、iOSやmacOSではサポートされておらず、PDFは公式にOpenTypeの仕様から削除されました。どの形式を選ぶにせよ、これらの画像はGlyphsの外で準備する必要があります。

例えば、Glyphsのアイコンをフォントの大文字Gに入れたいとします。Pixelmatorやプレビューのような画像編集アプリケーションで、いくつかの解像度の画像ファイルを準備するのが良い考えです。すでに画像がある場合は、サイズのバリエーションを作成するだけです。単純な縮小であれば、Automatorのワークフローでも可能です。OS Xのサービスとしてインストールすれば、Finderのコンテクストメニューからトリガーできます。

プロのヒント

少なくとも100ピクセル以下の小さなバリエーションを1つ作成してください。特に古いデバイスでは、低解像度での表示パフォーマンスが大幅に向上することがあります。

いずれにせよ、画像は.glyphsファイルの隣にあるサブフォルダに保管することを強くお勧めします。なぜなら、Glyphsはファイルにバイナリ自体ではなく、その相対パスのみを保存するからです。

もちろん、.glyphsファイルを移動させるときはいつでも、サブフォルダも一緒に移動させてください。そうしないと、Glyphsが画像ファイルが見つからないと文句を言うリスクがあります。もしそうなってしまった場合は、Set New Path for Imagesスクリプトが役立つかもしれません。mekkablue scriptsのImagesサブメニューにあります。

字幅を設定する

さて、Glyphsを起動して新しいフォントを作成しましょう。大文字Gを表示させ、その字幅を変更します。マスターレイヤーはグリフのメトリクスを決定するためだけのものであり、空のままにしておきます。字幅は、Units Per Em（UPM）に対する画像の比率を反映するべきです。UPMの値はファイル > フォント情報 > フォントで確認できます。

私の場合、アイコンは正方形でUPMは1000（CFF OpenTypeフォントの推奨値であり、Glyphsのアプリデフォルト）なので、字幅を1000に設定しました。もしグラフィックが高さの半分しか幅がない場合は、UPMの半分、つまり500に設定します。幅が2倍の場合は、2000に設定します。お分かりいただけたでしょう。

「iColor」レイヤーを作成する

さて、Gを開いたまま、パレット（ウィンドウ > パレット、Cmd-Opt-P）を開き、レイヤーセクションに移動します。Regularマスターを選択し、プラスボタンをクリックして新しいレイヤーを作成します。現在の日時で名付けられたバックアップレイヤーが表示されます。次に、そのレイヤーを右クリックしてiColorレイヤーに変換します。

プロのヒント

読み込み準備ができた画像がたくさんありますか？Add sbix Images to Fontスクリプトを使った一括読み込みを検討してみてください。詳しくは下記を参照してください。

レイヤーの名前はiColor 128に変更され、太字で表示されます。これは、特別なレイヤーとして認識されていることを示しています。次に、レイヤー名をダブルクリックして、目的の解像度を設定します。

旧バージョン

古いバージョンのGlyphsでは、レイヤーの名前をiColorに続けて半角スペースと画像の解像度を示す数字に変更していました。例えば、iColor 512、iColor 256、iColor 128、iColor 96のようになります。

残りは簡単です。FinderからPNGファイルをそれぞれのiColorレイヤーにドラッグするだけです。すべてが正しく行われていれば、セットアップは次のようになるはずです。

iColorサブレイヤーの字幅や、画像に対する操作（スケーリングや配置）は無視されます。したがって、グリフメトリクス内でPNGを再調整する必要はありません。

字幅、スケール、位置を制御する

画像の字幅と垂直位置は、どちらもマスターレイヤー、つまり上記の例ではRegularレイヤーを通じて制御されます。

画像の位置は、マスターレイヤーのバウンディングボックスの原点に設定され、デフォルトではレイヤーの原点（座標0, 0）になります。したがって、例えば画像をベースラインより100ユニット下に移動させたい場合は、y=-100の位置に非常に小さなパスを追加します。おおよそ次のようになります。

注

注意：一部の実装（最も顕著なのはChrome）では、マスターレイヤーのバウンディングボックスに応じて画像がクリッピングされます。そのため、画像の右上に同様の小さなパスを配置することも望ましいです。

これは、拡大されない閉じた2ノードのパスにすることができます。そうすれば見えなくなります。その唯一の機能は画像の原点を提供することであり、このようなミニパスはその機能をすでに果たしています。これは水平方向の移動にも機能します。単にパスをx=0から移動させるだけです。

グリフのアドバンス幅もマスターレイヤーから継承され、マスターレイヤーの字幅を設定することによってのみ制御できます。

画像のスケールは、レイヤー名にiColorの後に書かれた数字によって制御されます。技術的には、その数字はem、言い換えればフォントサイズに対応する画像のピクセル数です。

したがって、高さ500ピクセルの画像がiColor 500という名前のレイヤーに配置されていて、それが好みに比べて小さく見える場合は、レイヤー名に小さい数字、例えばiColor 450を使ってみてください。そうすれば、450ピクセルがem（フォントサイズ）を構成することになり、500ピクセルの画像はフォントサイズより9分の1だけ大きくなります。

縦のメトリクス

縦のメトリクスについて一つアドバイスです。Appleデバイスでsbix画像がクリッピングされるのを防ぐため、hheaの値が画像を完全に包含していることを確認してください。通常、この点で問題となる値はhheaAscenderだけです。それが画像の上端より上にあることを確認してください。縦のメトリクス

書き出し

さて、ファイル > 書き出しに進み、書き出し形式としてOTF、TTF、または任意のウェブフォント形式を選択します。Glyphsはsbixテーブルを含むフォントを作成します。楽しんでください！例えば、無料のTextPreviewでテストできます。

同等のSVGテーブル

ファイル > フォント情報 > 書き出しのインスタンスにSBIX to SVGパラメータを追加することで、ビットマップフォントのリーチ（およびサポート）を広げることができます。値として、希望するピクセルサイズを使用します。

すると、対応するiColorレイヤーがSVGテーブルに複製されます。（SVGフォントについて詳しくはこちら。）言い換えれば、同じビットマップ画像が2つのOpenTypeテーブル、SVGとsbixに含まれることになります。さらに、Export SVG TableとExport sbix Tableを使って、sbixテーブルとSVGテーブルの書き出し・非書き出しを制御できます。これにより、sbixのみ、SVGのみ、そしてsbix/SVGのハイブリッドフォントを生成できます。

Photoshopでのsbix

最新バージョンのPhotoshop CCはsbixフォントも表示できます。しかし、Photoshopでsbixが機能するためには、次の3つの基準が満たされている必要があります。

sbixグリフは、たとえそれが2つの小さなパスだけであっても、アウトラインも含まなければなりません。これらがPhotoshopでの切り抜きバウンディングボックスを定義します。アウトラインがない場合、すべてが切り抜かれ、ピクセル画像は見えません。
フォントはシステムにインストールされている必要があります（例：FontBookに）。Adobe Fontsフォルダでは機能しません。フォントキャッシュの問題を避けるために、書き出すたびに異なる名前を使用することをお勧めします。
各フォントのインストール後、sbixフォントが認識されるようにするためには、Photoshopを再起動する必要があります。

sbixのサポート状況

Appleデバイスの他に、sbixフォントはWindows 10以降、およびLinuxやAndroidデバイスでサポート・表示されます。最新のChromeバージョンはすべてのプラットフォームでsbixをサポートしており（ただし、上記のクリッピング問題には注意してください）、Firefoxも表示しますが、AndroidとLinuxでのみです。

便利なスクリプト

mekkablue scriptsには、sbixレイヤーの扱いを容易にする2つのスクリプトが含まれています。

Color > Add sbix Images to Font: フォルダ内のすべてのPNG、GIF、JPGファイルを取得し、現在のフォントとマスターにそれらを持つiColorレイヤーを作成します。スクリプトは次のファイル命名規則を期待します：グリフ名ピクセルサイズ.拡張子、例：Adieresis 128.png。
Color > sbix Spacer を使うと、sbixの位置とグリフの字幅を一括で設定できます。クリッピングを避けるための小さなパスを挿入するオプションさえあります。