【CSS Modules】font-paletteプロパティの使い方

font-paletteプロパティは、カラーフォントが持つ複数の配色セットの中から、利用したいカラーパレットを選択するために使用されるプロパティです。このプロパティを使用することで、テキストの色が単一の色ではなく、フォントデザイナーによって事前に定義された豊かな色彩表現を持つ「カラーフォント」の見た目を制御できます。

例えば、絵文字フォントのように複数の色で構成されるフォントや、SVGフォント、COLR/CPALフォントといった種類のカラーフォントに適用されます。利用者は、font-paletteプロパティに値を設定することで、フォントが持つ「通常」の配色 (normal) や、「明るい」配色 (light)、「暗い」配色 (dark) といった定義済みのパレットを選んだり、フォントに組み込まれている特定のパレットのID（<palette-identifier>）を指定して適用したりすることができます。また、フォントの基底となるパレットであるbaseキーワードも指定可能です。

この機能は、特にユーザーインターフェースのデザインにおいて、ダークモードやライトモードといったカラースキームに合わせてカラーフォントの見た目を切り替えたい場合や、ブランドイメージに合わせた特定の配色でカラーフォントを表示したい場合に非常に役立ちます。デザイナーが意図した多様な色彩表現をウェブページ上で再現し、ユーザー体験を向上させるための重要なCSSプロパティの一つです。

Copy
1selector {
2  font-palette: normal;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません