font-palette
Baseline 2022
Newly available
Since November 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
font-palette
は CSS のプロパティで、ユーザーエージェントがフォントに使用できるカラーフォントに含まれる多くのパレットの一つを指定できます。ユーザーは、 @font-palette-values
アットルールを使って、パレットの値を上書きしたり、新しいパレットを作成したりすることもできます。
メモ: font-palette
はフォントに色を付けるときに優先されます。 color
プロパティは、たとえ !important
が指定されていても、フォントパレットを上書きすることはありません。
構文
/* フォントが定義したパレットを使用 */
font-palette: normal;
/* ユーザーが定義したパレットを使用 */
font-palette: --one;
/* 2 色を混合した新しいパレットを作成 */
font-palette: palette-mix(in lch, --blue, --yellow);
値
normal
-
フォントに使用する既定色パレットまたは既定の字体着色(フォントメーカーが設定する)を指定します。この設定では、インデックス 0 のフォント内のパレットがレンダリングされます。
light
-
フォントの中で 'light' に一致する最初のパレットを指定します。フォントによっては、明るい(白に近い)背景に適用できるパレットを識別するメタデータを含むものがあります。フォントがこのメタデータを持っていない場合、
light
の値はnormal
として動作します。 dark
-
フォントの中で 'dark' に一致する最初のパレットを指定します。フォントによっては、位(黒に近い)背景に適用できるパレットを識別するメタデータを含むものがあります。フォントがこのメタデータを持っていない場合、この値は
normal
として動作します。 <palette-identifier>
-
@font-palette-values アットルールを使用して、フォントパレットに自分自身で値を指定できるようにします。この値は <dashed-ident> 形式を使用して指定します。
palette-mix()
-
指定したパーセント値と色補間方法で、 2 つのフォントパレット値を混合して新しい
font-palette
値を作成します。
公式定義
初期値 | normal |
---|---|
適用対象 | すべての要素とテキスト。 ::first-letter および::first-line にも適用されます。 |
継承 | あり |
計算値 | 指定通り |
アニメーションの種類 | by computed value |
形式文法
font-palette =
normal |
light |
dark |
<palette-identifier> |
<palette-mix()>
<palette-mix()> =
palette-mix( <color-interpolation-method> , [ [ normal | light | dark | <palette-identifier> | <palette-mix()> ] && <percentage [0,100]>? ]#{2} )
<color-interpolation-method> =
in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? ]
<rectangular-color-space> =
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020 |
lab |
oklab |
xyz |
xyz-d50 |
xyz-d65
<polar-color-space> =
hsl |
hwb |
lch |
oklch
<hue-interpolation-method> =
[ shorter | longer | increasing | decreasing ] hue
例
暗いパレットの指定
この例では、フォントメーカーによって dark (黒に近い背景でうまく動作します)とマークされた最初のパレットを使用することができます。
@media (prefers-color-scheme: dark) {
.banner {
font-palette: dark;
}
}
2 つのパレットの間をアニメーション
この例では、 font-palette
の値の変化をアニメーション化して、滑らかなフォントアニメーションを作成する方法を示します。
HTML
HTML には、アニメーションするテキストの単一の段落があります。
<p>color-palette<br />animation</p>
CSS
この CSS では、 Google Fonts から Nabla という色フォントをインポートし、独自の 2 つの font-palette
値を @font-palette-values
アットルールを使用して定義しています。そして、この 2 つのパレットの間でアニメーションする @keyframes
を作成し、このアニメーションを段落に適用します。
@import url("https://fonts.googleapis.com/css2?family=Nabla&display=swap");
@font-palette-values --blueNabla {
font-family: Nabla;
base-palette: 2; /* Nabla の青色パレット */
}
@font-palette-values --greyNabla {
font-family: Nabla;
base-palette: 3; /* Nabla の灰色パレット */
}
@keyframes animate-palette {
from {
font-palette: --greyNabla;
}
to {
font-palette: --blueNabla;
}
}
p {
font-family: "Nabla";
font-size: 5rem;
margin: 0;
text-align: center;
animation: animate-palette 4s infinite alternate linear;
}
結果
出力結果は次のようになります。
メモ: まだ discrete
で font-palette
アニメーションを実装しているブラウザーは、スムーズにアニメーションするのではなく、 2 つのパレットの間で切り替わります。
仕様書
Specification |
---|
CSS Fonts Module Level 4 # font-palette-prop |
ブラウザーの互換性
BCD tables only load in the browser