CSS フォントの新しい使い方: カラーフォントの実装

デザイナーが特別なイベントのタイトルフォントとして以下のフォントを使用したい場合はどうすればよいでしょうか?それを絵にしてみましょう。次に、さまざまな画面への適応に関する次の問題が発生する可能性があります。 1 つのサイズの画像のみを作成すると、拡大または縮小した後の効果はあまり良くありません。直接 SVG に?どうやら、Wordにコピーして太字にすることは不可能のようです。つまり、この方法では「テキスト」自体が本来のテキストが持つべき機能を失ってしまいます。

ここで、カラーフォントの利点が発揮されます。視覚効果の要件を満たすだけでなく、通常のテキストの機能も備えており、通常の操作を妨げることなく、コピー、貼り付け、スクリーン リーダーによる読み取りが可能です。

マット・ライオンのプレイボックス

カラーフォントとは何ですか?

カラーフォントの初見

私たちがよく知っている従来のフォントでは、フォント ファイル自体はフォントの外観の特徴のみを記述しており、これには通常、ベクター アウトライン データまたはモノクロ ビットマップ データが含まれます。ブラウザがモノクロフォントをレンダリングする場合、レンダリング エンジンは設定されたフォントの色でグリフ領域を塗りつぶし、最後に対応するテキストとその設定された色を描画します。カラー フォントは、フォントの外観の特徴だけでなく、色情報も保存し、フォント内でさまざまな配色を提供することもできるため、柔軟性が向上し、外観の詳細がより豊かになります。

日常的に最もよく使われるカラーフォントは絵文字表現です。たとえば、Windows 10 では、Segoe UI Emoji はカラー フォントです。

通常、カラー フォントには互換性情報も含まれており、これには Unicode でエンコードされたモノクロ グリフ データが含まれます。そのため、カラー フォントをサポートしていない一部のプラットフォームでも、カラー フォントのグリフを通常のフォントのようにレンダリングできるため、下位互換性効果が実現されます。

カラーフォントの実装標準

カラーフォントデザインの歴史では、各社が独自の実装計画を持っており、OpenType フォントに埋め込まれるカラー情報の標準が異なっています。最新の OpenType 標準では、カラーフォント データの記述形式が最大 4 つあります。

1. SVG は、Adobe と Mozilla によって開発されたベクター フォント標準です。標準の TrueType または CFF グリフ情報だけでなく、オプションの SVG データも含まれており、フォントの色、グラデーション、さらにはアニメーション効果の定義も可能です。 SVG 標準のカラー情報も CPAL に保存されます。
2. COLR + CPAL、Microsoft が主導するベクター フォント標準。これには、COLR (グリフ レイヤー データ)と CPAL (カラー情報テーブル)が含まれており、そのサポートは Windows 8.1 以降のバージョンに統合されています。
3. CBDT + CBLC、Google が主導するビットマップ フォント標準。 CBDTカラーアウトライン ビットマップ データと CBLCビットマップ配置データが含まれており、それらのサポートは Android に統合されています。
4. Apple が主導するビットマップ フォント標準である SBIX。 SBIX ( Standard Bitmap Image List ) には、PNG、JPEG、または TIFF の画像情報が含まれており、そのサポートは macOS と iOS に統合されています。

さまざまな標準のブラウザサポート

データソース: www.colorfonts.wtf

非常に多くの標準と不均一なブラウザサポートを見ると、互換性のために UA に従って異なる形式でフォントを配布する必要があるのではないかと疑問に思うかもしれません。さようなら！

ちょっと待ってください、若者よ！

2016年、大手メーカーはついにカラーフォントの標準としてOpenType SVGを採用することに合意しました。これは前述のSVGであり、現在W3Cが採用している標準でもあります。近い将来、すべての主要メーカーのブラウザが W3C が使用する SVG 標準を徐々にサポートするようになると思います。

フォントモジュール標準の現状

CSS フォント モジュール レベル 3: 現在は候補推奨状態にあり、主流のブラウザーでほぼ実装されている標準です。候補標準の最新版は、今年 6 月 26 日に公開されました。レベル 3 標準は、以前の CSS3 フォントと CSS3 Web フォントに基づいており、フォント読み込みイベントに関連する標準を CSS フォント読み込みモジュールに移行します。

CSS フォント モジュール レベル 4: レベル 3 の次世代標準。現在ワーキング グループのドラフト状態にあり、最新のドラフトは 4 月 10 日に更新されました。このドラフト版はレベル 3 に基づいており、追加された新しい属性には、この記事で紹介するカラー フォントのサポートが含まれます。

CSS カラーフォント

カラーフォントをサポートするブラウザでは、フォントは正しくレンダリングされますが、フォントに組み込まれている他の色の使用を制御することはできません。レベル 4 標準では、カラー フォントをより適切に使用できるように、カラー フォントに関連するいくつかの新しい標準が追加されました。次に見てみましょう。

フォントの色を選択: font-palette

先ほど、カラーフォントには CPAL テーブルを通じてさまざまなカラースキームを設定できることを学びました。 font-paletteには 3 つの組み込みパラメータがあり、カラースキームを変更する効果を実現するためのカスタムカラーをサポートしています。

1. normal: ブラウザはフォントを可能な限り非カラーフォントとしてレンダリングし、読みやすい配色を選択します。ブラウザは、決定を行う際に、現在設定されているフォントの色を決定条件に追加することもあります。フォントに組み込まれていないレンダリング用のカラー スキームのセットを自動的に生成することもできます。
2. light: 一部のカラーフォントでは、メタデータ内で特定の配色が明るい (白に近い) 背景での使用に適していることが示されています。この値を使用すると、ブラウザは、この機能がマークされている最初のカラー スキームを使用してレンダリングするだけです。フォント ファイル形式にメタデータがない場合、または対応する配色がメタデータでマークされていない場合、値は通常と同じように動作します。
3. 暗い: 明るいのちょうど反対。
4. カスタマイズ: 上記では 3 つの基本的なカラー オプションを紹介しました。他のカラー スキームを使用したりカスタマイズしたりする場合は、次に紹介する @font-palette-values を使用します。

例：

h1 {
    フォントファミリー: Segoe UI Emojil
    フォントパレット: ライト
}

カスタムフォントカラー: @font-palette-values

@font-palette-values指定されたフォントのカラーマッチングルールを定義するために使用されます。これにより、開発者はフォントに組み込まれているさまざまなカラー スキームを自由に選択できるだけでなく、カラー スキームをカスタマイズすることもできます。カスタム カラー スキームのfont-palette選択もこのルールを通じて設定されます。

基本的な定義ルールは@font-palette-values nameです。 nameこのカラー マッチング ルールのカスタム名です。

以下に、3 つの主要な属性について説明します。

フォントファミリー

まず、フォントの配色を設定する場合、どのフォントに配色情報を設定するのかを指定する必要があります。現在の色設定はfont-familyを通じてフォントにバインドできます。

@font-palette-values ​​スノー{
    フォントファミリー: TriColor;
}

ベースパレット

作成者がカラーフォントを作成する場合、多くの場合、さまざまなフォントカラースキームを組み込みます。この情報を保存するとき、それぞれの異なるカラースキームには、対応する独自のidまたはindexがあります。選択するにはbase-paletteを使用します。

@font-palette-values ​​スノー{
    フォントファミリー: TriColor;
    ベースパレット: 5;
}

カラー-x

画像クレジット: typography.guru

上の画像は、COLR がグリフをレイヤー化する方法を示しています。 COLR はグリフの各部分をレイヤーに分割し、それらのレイヤーを特定の順序で完全なフォントに結合します。各レイヤーは CPAL のカラー情報を使用して色付けされます。より強力なカスタマイズ効果を実現するために、標準ではcolor-x属性が使用され、特定のレイヤーの色をコピーする機能が提供されます。 xはレイヤーidです。

@font-palette-values ​​RedSnow {
    フォントファミリー: TriColor;
    ベースパレット: 5;
    色1: rgb(255, 0, 0);
}

上記の例はcolor-xを介してレイヤーの色をコピーする方法を示しています。 base-palette: 5を通じて組み込みのカラー スキームを選択し、 color-1: rgb(255, 0, 0)を通じて、カラー スキーム内のid 1 のレイヤーの色を赤に変更します。

レベル4のその他の注目すべき新しい属性

フォントの最小サイズ、フォントの最大サイズ

プロパティ名が示すように、これら 2 つのプロパティはfont-sizeの最終的な値を制限します。計算されたfont-sizeの値が設定された最大値と最小値を超える場合、 font-sizeの最終値はfont-min-sizeまたはfont-max-sizeに直接変更されます。 これはレスポンシブ デザインに役立ち、フォントが大きすぎたり小さすぎたりしないようにフォント サイズを範囲に制限します。

要約する

フォント モジュール レベル 4 には、興味深い新機能が多数あります。具体的な効果や標準的な改善点は、主要ブラウザーがサポートを開始してからでないとわかりません。しばらくお待ちください。

この記事内のリンク

https://docs.microsoft.com/en-us/typography/opentype/spec/otff
https://www.w3.org/TR/2018/CR-css-fonts-3-20180626/
https://www.w3.org/TR/css-font-loading/
https://www.w3.org/TR/css-fonts-4/

参考文献

https://www.w3.org/TR/css-fonts-4/
https://docs.microsoft.com/en-us/typography/opentype/spec/
https://typography.guru/journal/windows-color-fonts/
https://www.colorfonts.wtf/

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。