font-palette
font-palette は CSS のプロパティで、ユーザーエージェントがフォントに使用できるカラーフォントに含まれる多くのパレットの一つを指定できます。ユーザーは @font-palette-values アットルールを使って、パレットの値を上書きしたり、新しいパレットを作成したりすることもできます。
メモ: font-palette はフォントに色を付けるときに優先されます。 color プロパティは、たとえ !important が指定されていても、フォントパレットを上書きすることはありません。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 101 | 101 | 107 | 15.4 | 101 | 15.4 | |
| DOM API | ||||||
| CSSFontPaletteValuesRule インターフェイスは @font-palette-values アットルールを表します。 | 101 | 101 | 107 | 15.4 | 101 | 15.4 |
| basePalette は CSSFontPaletteValuesRule インターフェイスの読み取り専用プロパティで、このルールに関連付けられたベースパレットを示します。 | 101 | 101 | 107 | 15.4 | 101 | 15.4 |
| fontFamily は CSSFontPaletteValuesRule インターフェイスの読み取り専用プロパティで、ルールが適用可能なフォントファミリーを列挙します。フォントファミリーは名前付きファミリーでなければならず、 courier のような汎用ファミリーは無効です。 | 101 | 101 | 107 | 15.4 | 101 | 15.4 |
| name は CSSFontPaletteValuesRule インターフェイスの読み取り専用プロパティで、関連付けられた @font-palette-values アットルールを識別する名前を表します。有効な名前は常に 2 つのダッシュで始まり、 --Alternate のようになります。 | 101 | 101 | 107 | 15.4 | 101 | 15.4 |
| overrideColors は CSSFontPaletteValuesRule インターフェイスの読み取り専用プロパティで、代わりに使用する色インデックスと色のペアのリストの文字列です。これは、対応する @font-palette-values/override-colors 記述子と同じ形式で指定します。 | 101 | 101 | 107 | 15.4 | 101 | 15.4 |
| その他 | ||||||
| @font-palette-values は CSS のアットルールで、フォントメーカーが作成した font-palette のデフォルト値をカスタマイズすることができます。 | 101 | 101 | 107 | 15.4 | 101 | 15.4 |
| CSS @ ルール | ||||||
| base-palette は CSS の記述子で、新しいパレットを作成する際に使用する定義済みパレットの名前またはインデックスを指定するために使用します。指定された base-palette が存在しない場合、インデックス 0 で定義されたパレットが使用されます。 | 101 | 101 | 107 | 15.4 | 101 | 15.4 |
| @font-palette-values の記述子である font-family は、どのフォントファミリーのパレット値を適用するかを指定するために使用します。これは、 CSS の font-family を設定するときに使用する値と正確に一致する必要があります。 | 101 | 101 | 107 | 15.4 | 101 | 15.4 |
| override-colors は CSS の記述子で、選ばれたベースパレットの色をカラーフォントに上書きするために使用します。 | 101 | 101 | 107 | 15.4 | 101 | 15.4 |
| CSS プロパティ | ||||||
dark | 101 | 101 | 107 | 15.4 | 101 | 15.4 |
light | 101 | 101 | 107 | 15.4 | 101 | 15.4 |
normal | 101 | 101 | 107 | 15.4 | 101 | 15.4 |
基本構文
/* Use built-in palette */
.emoji {
font-palette: dark;
}
/* Custom palette */
@font-palette-values --brand-palette {
font-family: "MyColorFont";
override-colors:
0 #ff6600,
1 #0066ff;
}
.branded {
font-family: "MyColorFont";
font-palette: --brand-palette;
}ライブデモ
実務での使いどころ
-
ダークモード対応
ダークモード時にカラーフォントのパレットを切り替え、背景色に合った配色にする。
-
ブランドカスタマイズ
カラーフォントの色をブランドカラーに合わせて上書きし、一貫したデザインを維持する。
注意点
- カラーフォント自体に対応していないブラウザや環境では、単色で表示されるフォールバック動作になる。
アクセシビリティ
- カラーフォントのパレットを変更する際は、文字と背景のコントラスト比が十分であることを確認すること。