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

このテクノロジーは、タイポグラフィの創(chuàng)造性のまったく新しい靜脈を開きます。私が見た色のフォントのいくつかは、せいぜい狂っていましたが、クロマティックなフォントは楽しく、革新的で、注目を集めています。 Font-Paletteプロパティと @Font-Palette-Valuesルールを含む新しいCSS機能の両方が、カラーフォントのカラーパレットを制御し、Colr Font形式の進化を制御するために、現(xiàn)代の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フォントであり、ボールポイントペンの外観を不可解に複製します。 「私の最大の目標は、常に手書きのテキストを可能な限り本物で再現(xiàn)することでした」と彼女は私に言いました。 「Liebeheideの場合、私はついにこれらの手作りの屬性をフォントでシミュレートすることができました。欠點？フォントファイル內のすべてのPNG畫像が加算され、膨大なOTFファイルサイズになります。これは、Adobe Indesignのようなデスクトップアプリケーションにとっては問題ではないかもしれませんが、Webで使用するためには、フォントはほとんど適用できません?！?/p>

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

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

デスクトップ

モバイル /タブレット

colrv0およびcolrv1

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

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

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

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

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

フォーマットにとってはまだ早い時期です。 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の無料変數(shù)色のフォントである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;
}

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

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

現(xiàn)在の制限

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

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

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

ブラウザのサポート

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

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

デスクトップ

モバイル /タブレット

ユースケース

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

ColrとIconフォント

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

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

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

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

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

まとめます

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

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

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