font-family
@font-palette-values 的 描述符 font-family 用於指定要應用字體系列的調色盤值。這需要與設定 CSS font-family 時使用的值完全匹配。
語法
css
@font-palette-values --Dark-mode {
font-family: "Bungee Spice";
/* other palette settings follow */
}
其他調色盤值僅適用於指定的字體系列。您可以透過使用相同的 <dashed-ident> 為其他字體系列建立 @font-palette-values。這意味著，如果您有多個彩色字型，並且可以為每個字型使用相同的識別符號。
值
<family-name>-
指定 font-family 的名稱。
正式定義
| 相關的 at-rule | @font-palette-values |
|---|---|
| 初始值 | n/a（必需） |
| 計算值 | 同指定值 |
正式語法
font-family =
<family-name>#
<family-name> =
<string> |
<custom-ident>+
示例
使用匹配的系列名稱
在此示例中，當 font-family 描述符在 @font-palette-values 規則中使用時，font-family 使用的值與宣告時相同。
HTML
html
<h2>This is spicy</h2>
<h2 class="extra-spicy">This is extra hot & spicy</h2>
CSS
css
@import "https://fonts.googleapis.com/css2?family=Bungee+Spice";
@font-palette-values --bungee-extra-spicy {
font-family: "Bungee Spice";
override-colors:
0 darkred,
1 red;
}
h2 {
font-family: "Bungee Spice", fantasy;
}
h2.extra-spicy {
font-palette: --bungee-extra-spicy;
}
結果
為多個字體系列使用相同的調色盤識別符號
在此示例中，為兩個字體系列設定了兩個 @font-palette-values 規則，但這兩個規則都使用相同的虛線識別符號 --Dark-Mode。這有助於同時為多個元素（在此示例中為 h1 和 h2）設定 font-palette 屬性。當您想要更新字型顏色以匹配您網站的品牌時，這會很有用。
css
@font-palette-values --Dark-Mode {
font-family: "Bungee Spice";
/* palette settings for Bungee Spice */
}
@font-palette-values --Dark-Mode {
font-family: "Bixa";
/* palette settings for Bixa */
}
h1,
h2 {
font-palette: --Dark-Mode;
}
h1 {
font-family: "Bungee Spice", fantasy;
}
h2 {
font-family: "Bixa", fantasy;
}
規範
| 規範 |
|---|
| CSS 字型模組第 4 級 # font-family-2-desc |
瀏覽器相容性
載入中…