コンパクトで圧縮に優れたカラーベクター フォント。お好みのグラデーション フレーバーをすべて使用できます。
Chrome 98 では、COLRv1 のサポートが追加されました。COLRv0 は COLRv0 フォント形式の進化です。COLRv0 フォント形式を進化させ、グラデーションの追加、合成とブレンド、圧縮率に優れたくっきりとしたコンパクトなフォント ファイル用の内部形状の再利用を改善することで、カラーフォントを広く普及させることを目的としています。
色を設定
ウェブでは、通常、テキストは CSS で指定された色で描画されます。フォントは特定の色を定義しません。ピクセルを配置する場所のみを示します。通常は、これは良いことです。CSS を使用すると、作成者は色を柔軟に選択できます。ただし、グリフに複数の色が含まれ、それらが一緒に意味を持つ場合もあります。たとえば、ライトブルー、ピンク、白のストライプが付いたこの旗 
は、現在のテキスト色で描画された場合、同じ意味を伝えません。
現在、ほとんどのユーザーにとって、絵文字は唯一のカラーフォントです。絵文字は通常、システムの絵文字フォントを使用するか、画像を挿入することでウェブに表示されます（これには独自の複雑さがあります）。特にビットマップベースのカラーフォントの場合、ファイルサイズが大きいため、絵文字にウェブフォントを使用することは困難でした。
COLRv1 をサポートすることで、ウェブやその他の場所でクリエイティブなカラーフォントの使用が普及することを願っています。
あなたらしさを表現するカラー
以下に、試すためのサンプルをいくつか示します。
この例で使用されている Google Fonts の例のアセットは、Google Fonts Web API で公開されています。これらのライブラリは Chrome 98 以降でのみ動作し、実験的な作業を示すものであるため、fonts.google.com のディレクトリには記載されていません。
無料のオープンソース ツールを使用して、独自の COLRv1 フォントを作成できるようになりました。nanoemoji フォント コンパイラを確認してください。これにより、SVG ソース画像から COLRv1 フォントをビルドし、Chrome 98 以降で試すことができます。こちらの手順に沿ってグラデーションの色を変更し、Bungee Spice を自分好みにカスタマイズしてみてください。
たとえば、Bungee Spice フォントを変更して、青と赤のグラデーションを作成できます。
結果を @googlefonts にツイートしてください 🙂? 放射状のグラデーションやスイープ グラデーションも試してみてください。
COLRv1 の新機能
このフォント形式は、色をサポートする複数の方法をサポートしていますが、どれもトレードオフがあります。しかし、これまでのところ、ウェブで成功した方法はありません。（トレードオフについて詳しくは、Dominik の BlinkOn 15 カンファレンス トークをご覧ください）。Chrome 98 では、COLRv0 の進化版である COLRv1 がサポートされます。COLRv1 のグラフィック機能とコンパクトなファイルの組み合わせにより、多くのカラーフォント ユースケースに適した選択肢になることを願っています。COLRv1 では、グラデーション、合成、ブレンドが追加され、内部シェイプの再利用が改善され、ファイルがさらにコンパクトになりました。
COLRv1 には、SVG ネイティブと同等の表現力に加え、ブレンドと合成が追加されています。塗りつぶしには、単色、線形グラデーション、円形グラデーション、スイープ/円錐状グラデーションの 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 チームはこれを改善するため、JavaScript と宣言型の CSS でのブラウザのフォント技術のサポートに関する情報を提供するために、CSS ワーキング グループで一連の議論を開始しました [1、2]。Chrome の今後のバージョンでは、カラーフォントやその他のフォント技術の効率的な機能検出をリリースする予定です。
COLRv1 のサポートが Chrome に限定されている現在、プロジェクトでカラーフォントを使用するには、次の 2 つの方法があります。モノクロのグリフも含む COLRv1 フォントについてフォント ベンダーに問い合わせます。COLRv1 をサポートしていないユーザー エージェントは、モノクロのグリフのレンダリングにフォールバックします。または、ChromaCheck ライブラリまたはユーザー エージェント スニッフィングを使用して、COLRv1 のサポートが使用可能かどうかを判断することもできます。次に、サポートされているユーザー エージェントで COLRv1 フォントを読み込む CSS を配信し、他のブラウザでは COLRv0、ビットマップ フォント形式、OpenType SVG などの代替フォント形式を使用します。
CSS フォントパレットのサポート
別の色セットを使用するのに新しいフォントが必要にならないと、非常に便利です。幸い、font-palette CSS プロパティというメカニズムがあります。Chrome でのフォント パレットのサポートの追加に取り組んでいます。
COLRv1 フォントとユーザー
COLRv1 フォントが興味を引いた場合は、プロジェクトで使用する COLRv1 カラーフォントについてフォント ベンダーにお問い合わせください。上記の例とデモをお試しください。また、独自のフォント作成を試してみるのもおすすめです。
Chrome の COLRv1 に関するフィードバックがある場合は、blink-dev メーリング リストに投稿するか、バグトラッカーで問題を報告してください。COLRv1 フォント形式自体に関するフィードバックがある場合は、COLRv1 仕様の GitHub リポジトリで問題を報告してください。
Chrome 98 では、COLRv1 によってウェブにまったく新しいレベルのタイポグラフィの創造性がもたらされることを楽しみにしています。
その他の情報
詳細については、以下のリソースもご参照ください。
COLRv1 の仕組みと Chrome への実装方法については、Dominik の BlinkOn 15 カンファレンス トークをご覧ください。
- International Unicode Conference #45: ベクター カラーフォント、Roderick Sheeter、Peter Constable、Dominik Röttsches による講演（動画、講演の詳細）
- nanoemoji フォント コンパイラ: SVG 画像から COLRv1 フォントを生成します。
- Google Fonts の color-fonts GitHub リポジトリ（Noto Emoji、Twemoji などのサンプルフォントの最新ビルドが含まれています）
- DJR の Bradley Initials フォント ショーケース、COLRv1 の詳細
- 利用可能なカラーフォント技術を特徴検出する ChromaCheck ツールとライブラリ
謝辞
COLRv1 に貢献してくれた Behdad Esfahbod、Cosimo Lupo、Peter Constable、Ben Wagner、Werner Lemberg、Dave Crossland、Vladimir Levantovsky、Jonathan Kew、Laurence Penney、Chris Lilley、David Jonathan Ross、Underware、Just van Rossum、Roel Nieskens の皆様に感謝いたします。