OpenType-SVG は、OpenType フォントの字形のすべてまたはほんの一部が SVG（Scalable Vector Graphics）アートワークとして表されるフォント形式です。 これにより、1 つの字形で複数のカラーおよびグラデーションを表示できます。 こうした機能から、OpenType-SVG フォントを「カラーフォント」とも呼んでいます。
OpenType-SVG フォントを使用すると、こうしたグラフィックの画質でテキストを表示できると同時に、編集、インデックス化、検索もできます。 また、代替字形または異体字を可能にする OpenType の機能が含まれることもあります。
Trajan Color Concept および EmojiOne Color などのカラーフォントは、プログラムのフォントメニューに通常のフォントのように表示されますが、多くのプログラムはカラーコンポーネントをまだ完全にサポートしていないので、すべての潜在的な機能を表示できない可能性があります。 ソフトウェアプログラムがフォント内で SVG アートワークをサポートしていない場合、字形は、ベタ黒のスタイルにフォールバックされます。 通常の OpenType フォントのように機能するので、このフォールバックスタイルにもカラーが適用できます。
Photoshop での OpenType-SVG カラーフォントの使用
Photoshop CC 2017 以降は OpenType-SVG フォントをサポートし、Trajan Color および EmojiOne の 2 つのフォントが付属します。 Creative Cloud サブスクリプションには、Trajan Color を web およびデスクトップで使用する権利も含まれています。
OpenType-SVG フォントを使用するには、次の手順に従います。
- 段落またはポイントテキストタイプのレイヤーを作成します。
- フォントを OpenType-SVG フォントに設定します。 これらのフォントは、次の OpenType-SVG アイコンで示されます。
- キーボードを使用して入力するか、字形パネルを使用して特定の字形を選択します。 字形パネルを表示するには、ウィンドウ／字形を選択します。
字形パネルを使用した場合にのみ、OpenType-SVG フォントを使用して単純に文字を入力できると同時に、すべての異体字を利用できます。 例えば、Trajan Color Concept には、Silver、Copper、Steel Blue、Marble など、各文字に 20 種類の異なるスタイルセットが含まれていますが、アクセスするには字形パネルが必要です。
（テキスト／シェイプに変換を選択して）テキストレイヤーを編集可能なシェイプに変換する場合、OpenType-SVG フォントの文字は、白黒のフォールバックスタイルに戻ります。
Illustrator での OpenType-SVG カラーフォントの使用
Illustrator は、Trajan Color、EmojiOne Color などの OpenType SVG フォントをサポートしています。 字形パネルを使用すると、特定の字形を指定できます。また、合成字形を作成したり、別の文字のバリエーションを検索したりすることができます。 Illustrator での OpenType SVG フォントの詳細については、フォントオプション概要を参照してください。
Trajan Color Concept
Trajan Color Concept は、アジャイル開発プロセスで少数の書体が開発される Adobe Type Concepts の 1 つです。これにより、先進的な書体を求めるお客様により速く新しい書体を提供し、フィードバックをいただくことで、デザインの幅を広げることができます。
Trajan Color Concept は、多くの異なるカラーおよびテクスチャ（19）から選択できます。 20 種類のスタイルセットから様々なカラーの組み合わせにアクセスするような数多くの細かい SVG アートワークの使用は、全体的なファイルサイズを増加させます （このことが SVG アートワークの使用を難しいものにしているのは確かです。これが、Trajan Color がまだコンセプトフォントと考えられている理由の 1 つです）。
Trajan Color Concept のデフォルトカラースタイル（Gold）および最初の 18 種類の OpenType スタイルセットが、このフォントで利用可能なすべてのマルチカラーオプションを構成します。 フォールバックスタイル（OpenType-SVG のカラー機能をサポートしていないアプリケーションで表示されます）は、スタイルセット 20 とまったく同じです。
EmojiOne Color
絵文字フォントは、OpenType-SVG フォントの一例です。 絵文字フォントを使用して、スマイリー、旗、道路標識、動物、人物、食品、場所といったカラフルなグラフィカル文字をドキュメントに含めることができます。 EmojiOne フォントなどの OpenType-SVG 絵文字フォントを使用すると、1 つまたは複数の他の字形から合字を作成できます。 例えば、国旗を作成したり、人物やボディパーツ（手、鼻など）を表す特定の字形の肌の色を変更することができます。
EmojiOne Color は、Denis Denz がデザインし、Rick Moby がプロデュースした EmojiOne アートワークからアドビが作成したオープンソースのカラーフォントです。 このフォントには、Unicode 9.0 のすべての絵文字が含まれ、ZWJ、肌色の多様性、国旗絵文字をサポートします。
EmojiOne などの絵文字フォントの文字は、キーボード上の文字とは異なります。 これらは、字形パネルを使用するか、オペレーティングシステムの Charmap（Windows）および Characters（macOS）を使用するか、emojicopy.com などのオンラインページからテキストをコピーすることでのみ挿入できます。
注意：
- ウィンドウ／ワークスペース／グラフィックと web を選択して「字形」タブをクリックすることでも、字形パネルを開くことができます。
- 字形パネルの一番上の行に最近使用した絵文字が表示されます。
Photoshop では、EmojiOne 字形のシーケンスを挿入して他の字形を作成できます。 例えば、国旗を作成したり、1 人の人物やボディパーツの肌の色を変更したりできます （2 つまたはそれ以上の人物の絵文字では、これは機能しません）。
国旗の作成 EmojiOne の丸文字（A、B、C、D など）は、キーボード上のキーには対応していません。 字形パネルからこれらの文字を挿入して国の ISO コードを作成する場合、2 文字で国旗が形成されます。 例えば、US を選択するとアメリカ国旗、GB を選択するとイギリス国旗、AR を選択するとアルゼンチンの国旗、IN を指定するインドの国旗になります。 コードの完全なリストは、ISO 3166-1 で定義されています。
キャラクターのバリエーションの作成 1 人の人物のデフォルトのキャラクターまたはボディパーツをフィッツパトリック分類で利用可能な 5 つの肌の色調（GID 356 ～ 360）のいずれかと組み合わせます。 元のデフォルトキャラクターは、肌の色調に合致するキャラクターに置き換わります。 このような合成は、現在、複数の人物の字形では機能しません。
注意：
- デフォルトの 1 人の人物のキャラクターまたはボディパーツの絵文字は、任意の肌の色調の文字と 1 回のみペアにできます。
- 字形のシーケンスは、フォント特性です。 すべての OpenType-SVG フォントで複数の文字を組み合わせて 1 つの字形を形成できるわけではありません。
CSS での OpenType-SVG フォントの使用
OpenType-SVG フォントには、他の OpenType フォントのように、CSS で有効にできる機能が含まれています。 これらの機能へのアクセスの概要については、OpenType 機能の使用および CSS での OpenType 機能の構文を参照してください。
例えば、Trajan Color Concept の追加のカラースタイルは、1 から 20 まで番号が付けられたスタイルセットと呼ばれる OpenType 機能として設定されています（ss01、ss02、ss03 など）。 Trajan Color の 20 種類のスタイルのいずれかをテキストセットに適用するには、font-feature-settings を使用します。
OpenType-SVG フォントをサポートしていないブラウザーでは、フォールバックスタイル（スタイルセット 20 と同じ）が表示されます。
OpenType-SVG web フォントをサイトに追加する場合、フォントの字形のすべてまたはほんの一部に関連付けられた SVG アートワークの追加が原因で、プレーンの OpenType フォントに比べてファイルサイズが大きくなる可能性があることに注意してください。
OpenType-SVG フォントをサポートするアプリケーション
- Photoshop CC 2017 以降
- Illustrator
- Firefox バージョン 32 以降
- Microsoft Edge（Windows 10 Anniversary Update 以降のもの）
- Windows 10 では、DirectWrite および Direct2D プラットフォームコンポーネントを使用すると、これらの API を使用するすべてのアプリで OpenType-SVG をサポートできます。
既知の問題
Illustrator および InDesign
Illustrator または InDesign で OpenType-SVG カラーフォントを使用する場合、次の問題が発生することがあります。
- PDF または SVG に書き出した後、グリフが間違った位置に表示されることがあります。
- グリフのアウトラインを作成した場合、SVG カラーフォントでシアー、回転またはリフレクト効果を適用すると、効果が失われたり、文字が元の位置から移動してしまうことがあります。
- テキストを縦に設定すると、書き出し後に文字の位置が違って見えることがあります。
- スパイラルパスの配置でテキストを設定すると、文字が間違った位置に表示されることがあります。
現在、ソフトウェアチームがこの問題の解決に取り組んでいます。
関連リソース
次に、OpenType-SVG フォントの準備および使用に関するその他の情報源へのリンクを示します。
- OpenType-SVG フォントの SVG テーブルの詳細と仕様：
https://www.microsoft.com/typography/otspec/svg.htm - OpenType-SVG フォント作成のためのツールとサンプルファイル：
https://github.com/adobe-type-tools/opentype-svg - https://pixelambacht.nl/chromacheck/ は、OpenType-SVG を含む様々なカラーフォント形式に関するブラウザーのサポート状況を知らせる web ページです （ソースコードは、https://github.com/RoelN/ChromaCheck にあります）。
- TypeDrawers フォーラムでの OpenType-SVG フォントの準備と使用に関する活発なディスカッション：http://typedrawers.com/discussion/comment/19442/
