コンパクトで圧縮に適したカラーベクター フォントで、好みのグラデーション フレーバーをすべて選択可能です。
Chrome 98 では、Chrome チームと Fonts チームが COLRv1 のサポートを追加しました。これは、COLRv0 フォント形式の進化であり、グラデーションの追加、合成、ブレンド、内部形状の再利用の改善により、圧縮に適した鮮明でコンパクトなフォント ファイルを実現することでカラーフォントを普及させることを目的としています。
今すぐ色を塗る
ウェブ上では通常、テキストは CSS で指定された色で描画されます。フォントは特定の色を定義せず、ピクセルを配置する場所を示すだけです。それは通常、良いことです。CSS を使用すると、作成者は色を柔軟に選択できます。ただし、グリフには意味を持つ複数の色が含まれる場合があります。たとえば、水色、ピンク、白のストライプの 
フラグを現在のテキスト色で単純に描画した場合、意味は伝わりません。
現在、ほとんどのユーザーにとって、表示されるカラーフォントは絵文字のみです。絵文字は通常、システムの絵文字フォントを使用するか、画像（独自の追加機能である 
）を挿入することでウェブ上で表示されます。ビットマップ ベースのカラーフォントでは特にファイルサイズが大きいため、絵文字にウェブフォントを使用するのは困難です。COLRv1 をサポートすることで、ウェブなどでクリエイティブなカラーフォントの使用が普及することを期待しています。
あなたの色を見せて
いくつか例をご用意しましたので、ぜひお試しください。
この例で使用されている Google Fonts のサンプル アセットは、Google Fonts web API で公開されています。これらは Chrome 98 以降でのみ動作し、試験運用中の成果を示すため、fonts.google.com のディレクトリには掲載されていません。
無料のオープンソース ツールを使用して、独自の COLRv1 フォントを作成できるようになりました。SVG ソース画像から COLRv1 フォントをビルドできる nanoemoji フォント コンパイラを確認し、Chrome 98 以降でお試しください。こちらの手順に沿ってグラデーション カラーを変更し、Bungee Spice で独自のカスタマイズを試してみましょう。
たとえば、次のように Bungee Spice フォントを変更して、青と赤のグラデーションを持たせることができます。
結果を @googlefonts にツイートしてください 🙂? 放射状のグラデーションやスイープのグラデーションを試してみませんか？
COLRv1 の新機能
フォント形式は色をサポートする複数の方法をサポートしており、そのすべてにトレードオフがありますが、ウェブではこれまでのところ成功していません。（トレードオフの詳細については、Dominik の BlinkOn 15 カンファレンスの講演をご覧ください）。Chrome 98 では、COLRv0 の進化形である COLRv1 がサポートされます。COLRv1 のグラフィック機能とコンパクト ファイルの組み合わせにより、多くのカラーフォントのユースケースに適した選択肢となることを願っています。COLRv1 では、グラデーション、合成、ブレンディングが追加され、内部のシェイプの再利用が改善されて、よりコンパクトなファイルになっています。
COLRv1 は、SVG Native と、その上に追加されたブレンドと合成とにほぼ同等の表現能力を備えています。塗りつぶしには、単色、線形グラデーション、放射グラデーション、スイープ/円錐グラデーションの 4 種類があります。COLRv1 を使用すると、平行移動、回転、傾斜、スケーリングの一連の変換を使用して、グリフ要素の位置変更と変換を行うことができます。さらに、フォント バリエーションがサポートされており、フォントで既存のシェイプ定義形式が再利用されます。
水晶玉の絵文字を例に考えてみましょう。星形のハイライトは同じ形状ですがサイズが異なります。つまり、ファイル内で重複することなく 1 つの形状を再配置して再利用できます。この形式を使用すると、新しいグリフ内でグリフ全体を再利用できます。各グリフに対して同じ形状を冗長にエンコードする必要はありません。たとえば、花の装飾が施された装飾カラー フォントでは、既存のカラーグリフを参照するだけで、同じ花の形が異なる文字の上に配置されます。ウェブフォントのユースケースでは、COLRv1 は woff2 未満で十分に圧縮されます。たとえば、COLRv1 を使用した Twemoji のテストビルドは、インフレートすると約 1.2 MB かかりますが、woff2 形式では約 0.6 MB になります。Noto 絵文字グリフセット全体のビルドは、ビットマップ バージョンでは 9 MB から、COLRv1+woff2 形式では 1.85 MB に縮小されます。
カラーフォントのユースケース
キャッチーな見出し
新色のフォントで、視覚情報、見出し、バナーを目立たせることができます。
画像の置き換えが不要に: 絵文字フォント
ユーザー作成コンテンツをサポートしている場合、ユーザーは絵文字を使用する可能性があります。現在は、クロス プラットフォームでの一貫したレンダリングと、OS がサポートする絵文字よりも新しい絵文字をサポートする機能を確保するために、テキストをスキャンして絵文字を画像に置き換えるのが一般的です。これらの画像は、クリップボード オペレーション中にテキストに戻す必要があります。以下に実際の例を示します。
絵文字フォントを使用している場合は、次のようにそのフォントでテキストをレンダリングします。
<style>
@import url(https://fonts.googleapis.com/css2?family=Noto+Color+Emoji);
.emoji {
font-family: "Noto Color Emoji", sans-serif;
}
</style>
<span class="emoji">🙂</span>
同様に、絵文字のリアクション コンポーネントでは、COLRv1 によって画像アセットのカタログではなく、コンパクト フォント ファイルを使用できます。
絵文字選択ツールを完成させるには、何枚の画像を取得する必要があるか想像してみてください。
アイコン フォントの色
アイコン フォントに色を使用することで、明瞭さが増し、グリフがわかりやすくなります。
芸術表現
スペース効率の高いカラーフォントにより、ウェブ上のテキストで新しい形式の芸術表現が可能になります。このクーフィー スタイルのアラビア フォントの例では、従来の書道のインクの流れをアラビア文字のクフィー スタイルに適用すると、カラー グラデーションを使用して芸術的な解釈を行っています。これは、ペン先とインクではなく、石に刻まれたことに由来します。
機能検出
現時点では、ブラウザ エンジンが特定のカラーフォント形式をサポートしているかどうかを確認するには、ユーザー エージェント スニッフィングを使用するか、@PixelAmbacht による ChromaCheck などのライブラリを検索して Canvas でのカラーグリフのレンダリングをテストします。どちらのソリューションも最適ではありません。機能テストでは、特定の機能自体のみを検出し、ユーザー エージェント スニッフィングを回避する必要があります。ChromaCheck ライブラリは、サポートを判断するためにリソースを大量に消費する 2D キャンバス オペレーションを実行する必要はありません。
Chrome チームはこれを改善するため、CSS ワーキング グループで一連のディスカッション [1、2] を開始し、JavaScript および CSS での宣言型ブラウザのフォント テクノロジー サポートに関する情報を提供しています。担当チームは、Chrome の今後のバージョンで、カラーフォントやその他のフォント テクノロジーの効率的な機能検出機能をリリースする予定です。
COLRv1 のサポートが Chrome に限定されているときに、現時点でプロジェクトでカラーフォントを使用する場合は、次の 2 つの方法があります。フォントのベンダーから、モノクロのグリフを含む COLRv1 フォントについても問い合わせます。COLRv1 をサポートしていないユーザー エージェントは、モノクログリフのレンダリングにフォールバックします。または、ChromaCheck ライブラリまたはユーザー エージェント スニッフィングを使用して、COLRv1 がサポートされているかどうかを判断することもできます。次に、サポートするユーザー エージェントで COLRv1 フォントを読み込み、COLRv0、ビットマップ フォント形式、または他のブラウザでは OpenType SVG などの代替フォント形式を使用する CSS を提供します。
CSS フォントパレットのサポート
別の色セットを使用するために新しいフォントが不要であれば、非常に便利です。幸いなことに、フォント パレットの CSS プロパティというメカニズムが存在します。現在、Chrome チームは Chrome のフォントパレットのサポートの追加に取り組んでいます。
COLRv1 フォントとユーザー
COLRv1 フォントが好まれる場合は、プロジェクトで使用する COLRv1 カラーフォントについてフォント ベンダーにお問い合わせください。また、上記の例とデモをお試しください。または、今すぐ独自のフォントを作成してみてはいかがでしょうか。
Chrome の COLRv1 に関するフィードバックがある場合は、blink-dev メーリング リストに投稿するか、Issue Tracker で問題を報告してください。COLRv1 フォント形式自体についてフィードバックがある場合は、COLRv1 仕様の GitHub リポジトリでイシューを提出してください。
Chrome 98 では、COLRv1 がまったく新しいタイプのタイポグラフィの創造性をウェブにもたらします。
詳細
詳しくは、以下のリソースをご覧ください。
COLRv1 の仕組みと Chrome への実装方法については、Dominik の BlinkOn 15 カンファレンス トークをご覧ください。
- International Unicode Conference #45: Vector Color Fonts、Roderick Sheeter、Peter Constable、Dominik Röttsches による講演（動画、詳細）
- nanoemoji フォント コンパイラ。SVG 画像から COLRv1 フォントを生成します。
- Google Fonts のカラーフォントの GitHub リポジトリには、Noto 絵文字、Twemoji、その他のサンプル フォントの現在のビルドが含まれています。
- DJR による Bradley Initials フォントのショーケース（COLRv1 も使用）
- ChromaCheck ツールとライブラリ: 使用可能なカラーフォント技術を検出します。
謝辞
Behdad Esfahbod、Cosimo Lupo、Peter Constable、Ben Wagner、Werner Lemberg、Dave Crossland、Vladimir Levantovsky、Jonathan Kew、Lauence Penney、Chris Lilley、David Jonathan Ross、Underware、Just van Rossum、Rel Nieskens への貢献に感謝します。