OpenType-SVG は、OpenType フォントの字形のすべてまたはほんの一部が SVG(Scalable Vector Graphics)アートワークとして表されるフォント形式です。これにより、1 つの字形で複数のカラーおよびグラデーションを表示できます。こうした機能から、OpenType-SVG フォントを「カラーフォント」とも呼んでいます。

OpenType-SVG フォントを使用すると、こうしたグラフィックの画質でテキストを表示できると同時に、編集、インデックス化、検索もできます。また、代替字形または異体字を可能にする OpenType の機能が含まれることもあります。

Trajan Color Concept および EmojiOne Color などのカラーフォントは、プログラムのフォントメニューに通常のフォントのように表示されますが、多くのプログラムはカラーコンポーネントをまだ完全にサポートしていないので、すべての潜在的な機能を表示できない可能性があります。ソフトウェアプログラムがフォント内で SVG アートワークをサポートしていない場合、字形は、ベタ黒のスタイルにフォールバックされます。通常の OpenType フォントのように機能するので、このフォールバックスタイルにもカラーが適用できます。

Photoshop CC での OpenType-SVG カラーフォントの使用

Photoshop CC 2017 は OpenType-SVG フォントをサポートし、Trajan Color および EmojiOne の 2 つのフォントが付属します。Trajan Color は、Typekit の Web での使用およびデスクトップ同期にも利用できます。 

OpenType-SVG フォント:複数のカラーおよびグラデーション
OpenType-SVG フォント:複数のカラーおよびグラデーション

OpenType-SVG フォントを使用するには、次の手順に従います。

  • 段落またはポイントテキストタイプのレイヤーを作成します。
  • フォントを OpenType-SVG フォントに設定します。これらのフォントは、次の OpenType-SVG アイコンで示されます。
  • キーボードを使用して入力するか、字形パネルを使用して特定の字形を選択します。字形パネルを表示するには、ウィンドウ/字形を選択します。

字形パネルを使用した場合にのみ、OpenType-SVG フォントを使用して単純に文字を入力できると同時に、すべての異体字を利用できます。例えば、Trajan Color Concept には、Silver、Copper、Steel Blue、Marble など、各文字に 20 種類の異なるスタイルセットが含まれていますが、アクセスするには字形パネルが必要です。

(テキスト/シェイプに変換を選択して)テキストレイヤーを編集可能なシェイプに変換する場合、OpenType-SVG フォントの文字は、白黒のフォールバックスタイルに戻ります。

Trajan Color のフォールバックスタイル
Trajan Color のフォールバックスタイル

EmojiOne のフォールバックスタイル
EmojiOne のフォールバックスタイル

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 とまったく同じです。

字形パネルまたはポップアップ選択パネルを使用して Trajan Color の他の文字カラーを選択可能
字形パネルまたはポップアップ選択パネルを使用して Trajan Color の他の文字カラーを選択可能

EmojiOne Color

絵文字フォントは、OpenType-SVG フォントの一例です。絵文字フォントを使用して、スマイリー、旗、道路標識、動物、人物、食品、場所といったカラフルなグラフィカル文字をドキュメントに含めることができます。EmojiOne フォントなどの OpenType-SVG 絵文字フォントを使用すると、1 つまたは複数の他の字形から合字を作成できます。例えば、国旗を作成したり、人物やボディパーツ(手、鼻など)を表す特定の字形の肌の色を変更することができます。

EmojiOne Color は、Denis Denz がデザインし、Rick Moby がプロデュースした EmojiOne アートワークからアドビが作成したオープンソースのカラーフォントです。このフォントには、Unicode 9.0 のすべての絵文字が含まれ、ZWJ肌色の多様性国旗絵文字をサポートします。

EmojiOne Color の文字セットの一部を表示する字形パネル
EmojiOne Color の文字セットの一部を表示する字形パネル

EmojiOne などの絵文字フォントの文字は、キーボード上の文字とは異なります。これらは、字形パネルを使用するか、オペレーティングシステムの Charmap(Windows)および Characters(macOS)を使用するか、emojicopy.com などのオンラインページからテキストをコピーすることでのみ挿入できます。

注意:

  • ウィンドウ/ワークスペース/グラフィックと Web を選択して「字形」タブをクリックすることでも、字形パネルを開くことができます。
  • 字形パネルの一番上の行に最近使用した絵文字が表示されます。

Photoshop CC では、EmojiOne 字形のシーケンスを挿入して他の字形を作成できます。例えば、国旗を作成したり、1 人の人物やボディパーツの肌の色を変更したりできます(2 つまたはそれ以上の人物の絵文字では、これは機能しません)。

国旗の作成 EmojiOne の丸文字(A、B、C、D など)は、キーボード上のキーには対応していません。字形パネルからこれらの文字を挿入して国の ISO コードを作成する場合、2 文字で国旗が形成されます。例えば、US を選択するとアメリカ国旗、GB を選択するとイギリス国旗、AR を選択するとアルゼンチンの国旗、IN を指定するインドの国旗になります。コードの完全なリストは、ISO 3166-1 で定義されています。

字形を合成して、その国の国旗を形成する
字形を合成して、その国の国旗を形成する

キャラクターのバリエーションの作成 1 人の人物のデフォルトのキャラクターまたはボディパーツをフィッパトリック分類で利用可能な 5 つの肌の色調(GID 356 ~ 360)のいずれかと組み合わせます。元のデフォルトキャラクターは、肌の色調に合致するキャラクターに置き換わります。このような合成は、現在、複数の人物の字形では機能しません。

キャラクターの肌の色(GID 356~360)
キャラクターの肌の色(GID 356~360)

1 人の人物のキャラクターと肌の色を合成する
1 人の人物のキャラクターと肌の色を合成する

注意:

  • デフォルトの 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 を使用します。

.Trajan-gold { font-family: 'Trajan Color Concept';
               font-feature-settings: "ss01"; }

.Trajan-silver { font-family: 'Trajan Color Concept';
               font-feature-settings: "ss02"; }

OpenType-SVG フォントをサポートしていないブラウザーでは、フォールバックスタイル(スタイルセット 20 と同じ)が表示されます。

OpenType-SVG Web フォントをサイトに追加する場合、フォントの字形のすべてまたはほんの一部に関連付けられた SVG アートワークの追加が原因で、プレーンの OpenType フォントに比べてファイルサイズが大きくなる可能性があることに注意してください。 

OpenType-SVG フォントをサポートするアプリケーション

  • Photoshop CC 2017
  • Firefox バージョン 32 以降
  • Microsoft Edge(Windows 10 Anniversary Update 以降のもの)
  • Windows 10 では、DirectWrite および Direct2D プラットフォームコンポーネントを使用すると、これらの API を使用するすべてのアプリで OpenType-SVG をサポートできます。

関連リソース

次に、OpenType-SVG フォントの準備および使用に関するその他の情報源へのリンクを示します。

 

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー