ColRV1およびCSSフォントパレット

Arcade Game Typographyの著者であるToshi Omagariによると、世界初のマルチカラーデジタルフォントは、1982年にInsectorと呼ばれる未払いのビデオゲームのために作成されました。 Colr Font形式が2018年以降（インターネットエクスプローラーでも）完全なクロスブラウザーサポートを持っていたにもかかわらず、クロマティックタイプと呼ばれる多色のフォントは、Web上でまだ比較的まれです。

このテクノロジーは、タイポグラフィの創造性のまったく新しい静脈を開きます。私が見た色のフォントのいくつかは、せいぜい狂っていましたが、クロマティックなフォントは楽しく、革新的で、注目を集めています。 Font-Paletteプロパティと @Font-Palette-Valuesルールを含む新しいCSS機能の両方が、カラーフォントのカラーパレットを制御し、Colr Font形式の進化を制御するために、現代のWebタイポグラフィができることを掘り下げて実験する絶好の機会です。

Colrサポート

私は最後に2018年にカラーフォントについて書きました。当時、Opentype-SVG、Colr、SBIX、およびCBDT/CBLCの多色の書体には4つの異なる標準がありました。 Chromacheckを使用して、独自のブラウザがサポートする色フォント形式を確認できます。

Google Chromeは、Opentype-SVGを「Wontfix」としてマークしています。つまり、フォーマットはChromeまたはEdgeによってサポートされないことを意味します。 SBIXとCBDT/CBLCは、ラスター画像に基づいていて、より大きなフォントサイズでぼやけているため、Webで使用するためにほとんど無視できます。ビットマップベースのフォントのファイルサイズが大きいため、Webにとって悪い選択肢にもなります。

Ulrike RauschはLiebeheideの作成者であり、Bitmap Colorフォントであり、ボールポイントペンの外観を不可解に複製します。 「私の最大の目標は、常に手書きのテキストを可能な限り本物で再現することでした」と彼女は私に言いました。 「Liebeheideの場合、私はついにこれらの手作りの属性をフォントでシミュレートすることができました。欠点？フォントファイル内のすべてのPNG画像が加算され、膨大なOTFファイルサイズになります。これは、Adobe Indesignのようなデスクトップアプリケーションにとっては問題ではないかもしれませんが、Webで使用するためには、フォントはほとんど適用できません。」

すべてのブラウザはColrフォントをサポートしています（現在はColrv0と呼ばれています）。 2月にリリースされたChrome（およびEdge）のバージョン98は、フォーマットの進化であるColrv1のサポートを追加しました。

このブラウザサポートデータはCaniuseからのもので、詳細があります。数字は、ブラウザがそのバージョン以降の機能をサポートしていることを示しています。

デスクトップ

モバイル /タブレット

colrv0およびcolrv1

COLRV1は、OpenType 1.9標準の一部です。最初のColrv0にはOpentype-SVGの創造的可能性の多くがありませんでしたが、Colrv1は特定の欠点を避けながら、それらの可能性に一致します。たとえば、Colrv0は固体を実行することしかできませんでしたが、Colrv1は線形、放射状、および円錐勾配を行うことができます。また、この形式は合成とブレンドを追加し、シェイプの再利用がファイルサイズを保存できるようにします。

タイポグラフィの専門家であるRoel Nieskinsは次のように説明しています。「Opentype-SVG形式が最も汎用性を提供したため、最適な形式であると言っていました。フォントレンダリングレベルでSVGの基本的なサブセットを実装します。しかし、他のフォント技術（ヒント、可変軸など）ではうまく機能しません。実装するのは苦痛です。それで、私はColrに側面を切り替えました。 Colrは基本的に、Opentypeフォントがすでに持っているすべてのものを再利用します。レイヤー化を追加し、各レイヤーの色を変更する可能性を追加します。シンプルですが効果的です。」

Colrv1は、可変フォント軸と完全に互換性があり、メリットバッジ、プラカトンカラー、ロチャー色などの可変Colrフォントの例がすでにあります。

ネオンサインの外観をデジタル的に再現する（現在未発表の）書体である形式で可能なことのUlrike Rauschの印象的な例を示します。

Akiem Foundry Underwareのヘルミングは、Colrv1に魅了されており、「Colrv1形式は、近年可変フォントと同じように、タイプ設計に同様の（またはさらに大きな）影響を与える可能性がある」と言っています。 Akiemにとって、それは間違いなく優れた形式です。 「すべての以前のカラー形式は、グリフに色を追加するための悪いハッキングでした。 Opentype-SVGは一部の人々によって優れた解決策と見なされていますが、それは、私の観点からはまったくそうではありません。実用的な視点から、SVGはOpentypeの開いた構造内の「ロックされた部屋」です。データを再利用またはリンクしたり、他のフォントテーブルとSVGテーブルとの間に接続を作成する方法はありません。このため、可変SVGデータを使用して変数フォントを作成することはできません。」

フォーマットにとってはまだ早い時期です。 MozillaはまだCOLRV1を出荷していませんが、フォーマットでポジティブな位置を獲得しており、「Web使用でOpenType-SVGフォントに取って代わる可能性がある」と述べています。 AppleはSafariに実装することに消極的です。

Colrv1フォントは引き続き表示され、これらのブラウザで読みやすくなりますが、すべての文字は単一のソリッドカラーです（通常のフォントと同様に、CSSカラープロパティで設定できます）。私たちはまだ多くのタイプのファウンドリーがColrv1書体をリリースしており、Figmaのようないくつかの人気のある設計ツールもColrv0をサポートしていませんが、私はそれがWeb上のカラータイポグラフィの未来になると考えています。短期間で、Colrv1はReem KufiやBradleyのイニシャルなど、技術が何ができるかについてのいくつかの美しい例がすでにいくつかありました。

ColrとCSS

カラーフォントを使用している場合は、おそらくその色を制御できるようにする必要があります。これまで、それはCSSで行うことは不可能でした。 Font-Paletteプロパティは、書体のデフォルトの配色をオーバーライドして独自の適用する力をもたらします。このプロパティは、COLRV0およびCOLRV1の書体で動作します。 (Apple's Myles Maxfield explains that SVG fonts can opt-in to using palettes, whereas all the colors of a COLR typeface are automatically overridden by CSS.)

まともなカラーパレットを思いつくのは美術です。一部のタイプデザイナーは、私たちのために努力をしており、フォント内に代替パレットを含めています。 CSSのベースパレットを使用して、これらの異なる配色から選択できます。

フォントが代替パレットを提供しているかどうかはどのようにわかりますか？フォントのサイトはあなたに言うかもしれません。そうでない場合は、利用可能なすべての配色をリストするWakamai Fondueと呼ばれる便利なツールがあります（下の画像に示す）。この例では、フリントストーンの雰囲気を備えたHenrique Beierの無料変数色のフォントであるRocher Colorを使用します。 Wakamai Foundueを見ると、この書体が4色を使用しており、11種類のパレットオプションが付属していることがわかります。

ベースパレットの使用：0はデフォルトのカラーパレットを選択します（Rocherの場合、それはオレンジと茶色の色合いです）。

ベースパレットの使用：1は、The Toptfaceの作成者によって定義された最初の代替パレットなどを選択します。次のコード例では、灰色の異なる色合いのカラーパレットを選択しています。

 @font-palette-values -grays {
  フォントファミリー：Rocher;
  ベースパレット：9;
}

CSS @font-palette-valuesルールを使用してパレットを選択したら、font-paletteプロパティを使用して適用できます。

 .grays {
  フォントファミリー： 'Rocher';
  font-palette：-grays;
}

もちろん、ブランドの色に合わせたり、独自のデザインの感性を満たすために、独自のパレットを作成したい場合があります。すべての色をオーバーライドする場合は、ベースパレットを指定する必要はありません。

先駆的なタイプのデザイナーであるデイビッド・ジョナサン・ロスのバンジーを例にしましょう。デフォルトでは赤と白の2色のみを使用します。次の例では、フォントの両方の色をオーバーライドしているため、ベースパレットは重要ではなく、省略されています。

 @font-palette-values  -  pinkandgray {
  フォントファミリー：バンジー;
  オーバーライドカラー：
    0＃c1cbed、
    1＃ff3a92;
}

@font-palette-values -grayandpink {
  フォントファミリー：バンジー;
  オーバーライドカラー：
    0＃ff3a92、
    1＃c1cbed;
}

または、ベースパレットを出発点として設定し、いくつかの色のみを選択的に変更することができます。以下では、Rocherの灰色のカラーパレットを使用していますが、ミントグリーンで1つの色を無効にします。

 @font-palette-values -graysremix {
  フォントファミリー：Rocher;
  ベースパレット：9;
  オーバーライドカラー： 
    2 RGB（90,290,210）;
}

体 {
  フォントファミリー： "Rocher";
  font-palette：-graysremix;
}

オーバーライドカラーを指定する場合、どのビットがどの数字でオーバーライドされるかを知ることは困難です。試行錯誤を通じて、遊び、実験し、望ましい効果を達成する必要があります。

必要に応じて、Twemoji（以下を参照）やNOTOなどの絵文字フォントの色を変更することもできます。これがGoogleのフォントエンジニアの楽しいデモです。

現在の制限

少なくとも当分の間、残念な制限の1つは、CSSカスタムプロパティが @font-palette-valuesで機能しないことです。つまり、以下が無効であることを意味します。

 @font-palette-values  -  pinkandblue {
  フォントファミリー：バンジー;
  オーバーライドカラー：
    0 var（ - ピンク）、
    1 var（ - 青）;
}

別の制限：あるフォントパレットから別のフォントパレットへのアニメーションとトランジションは補間しません。つまり、あるパレットから別のパレットに即座に切り替えることができますが、それらの間で徐々にアニメーション化することはできません。ひどくアニメーション化された絵文字フォントの私の夢は、悲しいことに未実現です。

ブラウザのサポート

Font-Paletteと @Font-Palette-Valuesは、バージョン15.4以来Safariでサポートされており、バージョン101のリリースでChromeとEdgeに着陸しました。

このブラウザサポートデータはCaniuseからのもので、詳細があります。数字は、ブラウザがそのバージョン以降の機能をサポートしていることを示しています。

デスクトップ

モバイル /タブレット

ユースケース

おそらく、自分のプロジェクトでカラーフォントをどのように使用するかを既に想像することができます。ただし、いくつかの特定のユースケースがありますが、それは呼びかける価値があります。

ColrとIconフォント

アイコンフォントは、ウェブにアイコンを表示するための最も人気のある方法ではなくなる場合があります（Chrisは理由を説明しています）が、それらはまだ広く使用されています。 FontawesomeのDuotoneやMaterial Designの2トーンアイコンなど、複数の色のアイコンフォントを使用すると、Font-Paletteはカスタマイズのためのより簡単な方法を提供できます。

絵文字の問題を解決します

Nolan Lawsonは最近、Webで絵文字を使用する問題について書いています。 Chrome開発者ブログは、かなり複雑な現在のソリューションを説明しています。

ユーザー生成コンテンツをサポートする場合、ユーザーはおそらく絵文字を使用します。今日、テキストをスキャンして、遭遇した絵文字を画像に置き換えて、一貫したクロスプラットフォームのレンダリングと、OSがサポートするよりも新しい絵文字をサポートする機能を確保することが非常に一般的です。これらの画像は、クリップボードの操作中にテキストに切り替える必要があります。

ブラウザのサポートが大きい場合、Colrv1絵文字フォントははるかにシンプルなアプローチを提供します。 Colrv1には、あらゆるサイズで鮮明に見えるという利点もありますが、ネイティブブラウザの絵文字はぼやけて、より大きなフォントサイズでピクセル化されます。

まとめます

カラーフォントの前に、ウェブ上のタイポグラフィの創造性は、CSSでストロークまたはグラデーションフィルを適用することに限定されていました。ベクトル画像でいつでももっとカスタムを実行できますが、それは実際のテキストではありません。ユーザーが選択してクリップボードにコピーすることはできません。コマンドFでページで検索することはできません。スクリーンリーダーや検索エンジンが読み取らず、コピーを編集するためにAdobe Illustratorを開く必要があります。

カラーフォントは、ユーザーの注意を本当につかむ可能性があり、ランディングページやバナーに最適です。彼らはあなたが頻繁に到達するものではないかもしれませんが、あなたのサイトを際立たせることができるWebデザインの新しい表現力豊かで創造的な可能性を約束します。

以上がColRV1およびCSSフォントパレットの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。