CSS/@font-palette-values

@font-palette-values

@font-palette-valuesルールは、カラーフォントのカラーパレットをカスタマイズおよび名前付けするために使用されます。このルールを使うことで、フォントのデフォルトパレットを変更したり、新しいパレットを定義したりできます。

概要

カラーフォント（特にCOLRフォーマットをサポートするフォント）では、複数のカラーパレットを持つことがあります。@font-palette-valuesを使用することで、これらのパレットをCSS内で指定できるようになります。これにより、異なるスタイルのデザインやテーマに合わせてフォントの色を簡単に変更できます。

書式

@font-palette-valuesルールの基本的な構文は以下の通りです：

@font-palette-values <名前> {
  font-family: <フォント名>;
  base-palette: <パレットインデックス>;
  override-colors: {
    <レイヤーインデックス>: <色>;
    ...
  }
}

font-family: 対象となるフォント名を指定します。
base-palette: 使用するデフォルトのパレット（インデックス番号）を指定します。
override-colors: 特定のレイヤーの色を上書きする場合に使用します。

使用例

以下は、カラーフォントに対してカスタムパレットを定義する例です：

@font-palette-values custom-palette {
  font-family: 'ExampleFont';
  base-palette: 1;
  override-colors: {
    0: #FF0000;
    1: #00FF00;
    2: #0000FF;
  }
}

h1 {
  font-family: 'ExampleFont';
  font-palette: custom-palette;
}

この例では、ExampleFontフォントに対して、custom-paletteというカスタムパレットを作成し、特定のレイヤーの色を赤、緑、青に上書きしています。

プロパティの詳細

@font-palette-valuesで使用できる主要プロパティ：

font-family: 対象のフォントを指定します。
base-palette: フォントに内蔵されているパレットのインデックスを指定します（デフォルトは0）。
override-colors: 特定のレイヤーの色を上書きするための色指定を行います。

実用的な使用例

複数の異なるカラーパレットを定義し、異なる要素に適用する例です：

@font-palette-values light-theme {
  font-family: 'ColorFont';
  base-palette: 0;
}

@font-palette-values dark-theme {
  font-family: 'ColorFont';
  base-palette: 1;
  override-colors: {
    0: #FFFFFF;
    1: #CCCCCC;
  }
}

body.light-mode {
  font-family: 'ColorFont';
  font-palette: light-theme;
}

body.dark-mode {
  font-family: 'ColorFont';
  font-palette: dark-theme;
}

この例では、ColorFontフォントの異なるカラーパレットを「ライトテーマ」と「ダークテーマ」に応じて切り替えています。

注意事項

互換性: このルールは比較的新しい仕様であるため、すべてのブラウザでサポートされていない場合があります。使用前に互換性を確認してください。
フォント依存: 対象となるフォントがCOLRフォーマットやカラーパレットをサポートしている必要があります。

CSS/@font-palette-values

目次

@font-palette-values

概要

書式

使用例

プロパティの詳細

実用的な使用例

注意事項

関連情報