コンパクトで圧縮フレンドリーなカラーベクター フォントに、お好きなフォントをすべて使用できます いくつかあります。
Chrome 98 では、Chrome チームとフォントチームが COLRv1 のサポートを追加しました。 COLRv0 フォント形式の進化により、 グラデーションの追加、合成とブレンド、内部シェイプの再利用性の向上 圧縮しやすい、鮮明でコンパクトなフォント ファイルに適しています。
カラーに<ph type="x-smartling-void-element"><wbr /></ph>追加
ウェブ上のテキストは通常、CSS で指定された色で描画されます。フォントは
特定の色を定義せず、ピクセルを配置する位置を指定するだけ
あります。通常は問題ありません。CSS では、コンテンツを作成する際に
指定します。ただし、1 つのグリフに複数の色が含まれていて、それらの色が組み合わさって
なります。たとえば、このフラグ 
に水色、ピンク、白のストライプがある場合、次のようになります。
現在のテキストの色で単に描画されている場合は、同じ意味を示します。
現在、ほとんどのユーザーにとって、絵文字は唯一のカラーフォントです。絵文字
通常はシステム絵文字フォントを使用するか、画像を挿入して
（独自のウォッチフェイスの追加機能、
があります）。大きなファイル
特にビットマップベースのカラーフォントでは
サイズが小さいため
使用できます。COLRv1 をサポートすることで、
クリエイティブ カラーのフォントをウェブなどで使えるようにします。
カラーを見せて
試せる例をいくつか用意しました。
この例で使用されている Google Fonts のサンプル アセットは、 Google Fonts ウェブ API。内容は次のとおりです。 fonts.google.com のディレクトリに Chrome 98 以降でのみ動作し、試験運用版を紹介します。
無料のオープンソース ツールを使用して、独自の COLRv1 フォントを作成できるようになりました。確認 ナノ絵文字フォント コンパイラを使ってみる SVG ソース画像から COLRv1 フォントを作成して、 Chrome 98 以降。Bungee Spice で自分だけのひねりを。 グラデーション カラー こちらの手順をご覧ください。
たとえば、Bungee Spice フォントを変更して、青と赤のグラデーションを次のようにすることができます。
結果を @googlefonts にツイートしてください 🙂? 放射状グラデーションやスイープ グラデーションを試してみましょう。
COLRv1 の新機能
フォント形式は色をサポートする複数の方法をサポートしています。 しかし、これまでのところ、ウェブ上で成功した事例はありません。（詳細については、 トレードオフについて Dominik による BlinkOn 15 カンファレンス トークをご覧ください）。 Chrome 98 では、COLRv0 の進化版である COLRv1 がサポートされます。Google は、 グラフィック機能とコンパクト ファイルを組み合わせた COLRv1 は、 多くのカラーフォントのユースケースに適していますCOLRv1 はグラデーションを追加し、 合成、ブレンドといった特徴があり、 内部の図形の再利用により、さらにコンパクトなファイルを作成できます。
COLRv1 の表現機能は、COLRv1 とほぼ同じです。 SVG Native + ブレンドと合成を追加 あります。色の塗りつぶしには、単色、線形グラデーション、放射状の 4 種類があります。 スイープ/円錐勾配がありますCOLRv1 では再配置と変換 平行移動、回転、傾斜、縮尺のフルセットを使用したグリフ要素 必要があります。さらに、フォントのバリエーションや再利用にも対応しています。 既存のシェイプ定義の書式をフォントに追加します。
たとえば、水晶玉の絵文字を考えてみましょう。星型のハイライトは、 サイズが異なるため、1 つのシェイプだけが ファイル内で重複することなく、再配置、再利用されます。この形式では、 冗長にすることなく、新しいグリフ内で完全なグリフを再利用できます。 各グリフで同じ形状をエンコードします。文字の入った装飾的なカラーフォントで、 同じ形の花を異なる文字に重ねて配置した花の装飾 既存のカラーグリフを参照するだけですウェブフォントのユースケースの場合は、COLRv1 woff2 の下で十分に圧縮されます（例: COLRv1 を使用した Twemoji のテストビルド）。 容量は約 1.2MB ですが、woff2 形式では約 0.6MB です。アプリケーションのビルド Noto 絵文字グリフのフルセットを、ビットマップ バージョンの 9 MB から 1.85 MB に縮小 COLRv1+woff2 の形式で記述します
<ph type="x-smartling-placeholder">
カラーフォントのユースケース
キャッチーな見出し
刷新されたカラーフォントで、ハイライト、見出し、バナーを目立たせる できます。
画像の置き換えが不要（絵文字フォント）
ユーザー作成コンテンツをサポートしている場合、ユーザーは絵文字を使うのが一般的です。今日 テキストをスキャンして、画像で検出された絵文字を置き換えて 一貫したクロス プラットフォームでのレンダリングと、 絵文字を選択できます。これらの画像はテキストに戻す必要があります。 。具体的な例を見てみましょう。
<ph type="x-smartling-placeholder">
絵文字フォントがある場合は、次のようにテキストをフォント内にレンダリングします。
<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 では 画像アセットのカタログではなくコンパクトなフォント ファイルを使用します
完全な絵文字選択ツールを作成するために取得する必要がある画像の数を想像してみてください。
アイコン フォントの色
アイコン フォントに色を使用すると、グリフが明瞭になり、グリフがわかりやすくなります。
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">芸術的表現
スペース効率の高いカラーフォントにより、テキストで新たな形の芸術表現を実現 できます。この Kufi スタイルのアラビア フォントの例では、カラー グラデーションを 伝統的な書道の筆の流れが芸術としてどのように解釈されているか アラビア語のクフィ文体に当てはめてみましょう ペン先とインクで書かずに石に刻まれないようにします。
機能検出
現時点では ブラウザ エンジンが特定の色をサポートしているか フォント形式は、ユーザー エージェント スニッフィングや、 ChromaCheck などのライブラリ @PixelAmbacht: 色のレンダリングをテスト キャンバス上のグリフどちらのソリューションも最適ではありません。機能テストでは 特定の機能だけに限定し、ユーザー エージェントの傍受を回避できます。ChromaCheck リソースを大量に消費する 2D キャンバス オペレーションを サポートを決定する要素です。
Chrome チームはこの状況を改善したいと考えており、いくつかの議論を始めている [1、 2] CSS ワーキング グループに参加 JavaScript および JavaScript におけるブラウザ フォントの技術に関するサポートを 宣言的に行うことができます。チームは、効率的な機能検出のリリースを のカラー フォントやその他のフォント技術の変更を予定しています。
COLRv1 のときにプロジェクトでカラーフォントを使用したい場合 方法は 2 通りあります。「フォントを確認する」 モノクロのグリフも含まれる COLRv1 フォントのベンダーです。ユーザー エージェントを COLRv1 ではモノクロのレンダリングにフォールバックします 記述できます。または、ChromaCheck ライブラリまたはユーザー エージェントを使用することもできます。 COLRv1 がサポートされているか判断します。次に CSS とオーディエンスの ユーザー エージェントのサポートで COLRv1 フォントを読み込み、代替フォントを使用する （COLRv0、ビットマップ フォント形式、他のブラウザでは OpenType SVG など）がサポートされています。
CSS フォントパレットのサポート
別の色のセットを使用するときも、 新しいフォントが必要になりました。幸いなことに、 font-palette の CSS プロパティ:「 現在 Chrome チームが Chrome のフォントパレットのサポートをご覧ください。
COLRv1 フォントと
COLRv1 フォントに興味がある場合は、フォント ベンダーに COLRv1 色についてお問い合わせください 例とデモをお試しください。 実際に試してみてはいかがでしょうか。 独自の制作方法
Chrome の COLRv1 に関するフィードバックがある場合は、 blink-dev メーリング リスト Issue Tracker で問題を報告してください。フィードバックがある場合 問題がある場合は、 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 の color-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、Laurence Penney Chris Lilley、David Jonathan Ross、Underware、Just van Rossum、Roel Nieskens、 COLRv1 に協力してもらいました