【CSS Modules】@font-palette-valuesアットルールの使い方

Copy
1/*
2 * @font-palette-values は、可変フォントが持つカラーパレットをカスタマイズするためのアットルールです。
3 * これを使うことで、フォントに含まれる色を独自の色に置き換え、表現を豊かにできます。
4 *
5 * ここでは、--my-custom-palette という名前で新しいカラーパレットを定義しています。
6 * 名前はカスタムプロパティ（--から始まる）形式で付けることが推奨されます。
7 */
8@font-palette-values --my-custom-palette {
9  /*
10   * このカスタムパレットを適用したいフォントファミリー名を指定します。
11   * ここで指定するフォントは、通常、@font-face ルールで事前に読み込まれた
12   * カラーグリフ（色付き文字）を持つ可変フォントである必要があります。
13   * 例として、「MyVariableColorFont」という架空のフォント名を指定します。
14   */
15  font-family: "MyVariableColorFont";
16
17  /*
18   * 可変フォントが持つデフォルトのパレットの中から、ベースとして使用するパレットのインデックスを指定します。
19   * 多くのカラー可変フォントには複数の組み込みパレットが含まれており、通常は 0 から数え始めます。
20   */
21  base-palette: 0; /* 0番目（最初の）デフォルトパレットをベースとして使用 */
22
23  /*
24   * base-palette で選択したパレット内の特定の色を上書きします。
25   * `キー` はパレット内の色のインデックス（番号）で、`値` は新しいカラーコードです。
26   * どのインデックスがフォントのどの部分の色に対応するかは、フォントによって異なります。
27   */
28  override-colors:
29    0 #ff0000,   /* パレットエントリー0の色を赤 (#ff0000) に変更 */
30    1 #00ff00,   /* パレットエントリー1の色を緑 (#00ff00) に変更 */
31    2 #0000ff,   /* パレットエントリー2の色を青 (#0000ff) に変更 */
32    3 #ffff00;   /* パレットエントリー3の色を黄 (#ffff00) に変更 */
33}
34
35/*
36 * 上で定義したカスタムパレットをHTML要素に適用するCSSセレクタです。
37 * このクラスを適用した要素のテキストに、カスタマイズされたカラーパレットが適用されます。
38 */
39.text-with-custom-colors {
40  /*
41   * @font-palette-values で指定したのと同じフォントファミリーをここで指定します。
42   * 実際にこのコードを動作させるには、カラーグリフを持つ可変フォントファイルを
43   * @font-face ルールで事前に読み込む必要があります。
44   *
45   * 例（コメントアウトされていますが、実際の使用時に必要になります）:
46   * @font-face {
47   *   font-family: "MyVariableColorFont";
48   *   src: url("path/to/my-variable-color-font.woff2") format("woff2");
49   *   font-weight: 1 999; /* 可変フォントのウェイト範囲 */
50   *   font-style: normal;
51   *   font-display: swap; /* フォントの読み込み戦略 */
52   * }
53   */
54  font-family: "MyVariableColorFont", sans-serif;
55  
56  /*
57   * font-palette プロパティに、@font-palette-values で定義したカスタムパレット名
58   * (--my-custom-palette) を指定することで、このパレットがフォントに適用されます。
59   */
60  font-palette: --my-custom-palette;
61  
62  font-size: 3em;     /* 文字サイズを大きくして、色の変化を見やすくします */
63  font-weight: 700;   /* 文字を太くして、色の適用範囲を分かりやすくします */
64  line-height: 1.2;
65}

@font-palette-valuesは、カラーグリフ（色付き文字）を持つ可変フォントのカラーパレットをカスタマイズするためのCSSのアットルールです。このルール自体には引数や戻り値はなく、フォントが持つデフォルトの色を独自の色に置き換え、表現を豊かにするために使用します。

このサンプルコードでは、まず--my-custom-paletteというカスタムプロパティ形式の名前で新しいカラーパレットを定義しています。この定義の中では、font-familyプロパティで、このカスタムパレットを適用する可変フォントの名前を指定します。次に、base-paletteプロパティで、フォントが持つデフォルトのパレットの中から、ベースとして使用するパレットのインデックス（番号）を指定します。さらに、override-colorsプロパティを使って、ベースパレット内の特定の色を、インデックスと新しいカラーコードのペアで上書きし、独自の配色を作成します。

定義したこのカスタムパレットをHTML要素に適用するには、対象の要素のCSSでfont-familyプロパティに、@font-palette-valuesで指定したものと同じフォントファミリーを設定します。その上で、font-paletteプロパティに定義したカスタムパレットの名前（例: --my-custom-palette）を指定します。これにより、その要素に適用されている可変フォントのカラーグリフが、カスタマイズされたパレットの色で表示されるようになります。実際にこの機能を利用するには、カラーグリフを持つ可変フォントファイルを@font-faceルールで事前に読み込んでおく必要があります。