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.ac.cn/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 |
浏览器兼容性
加载中…