font-family

基线 2022

新功能

自 2022 年 11 月起，此功能在最新的设备和浏览器版本中均可使用。此功能可能在较旧的设备或浏览器中无法使用。

The @font-palette-values 描述符 font-family 用于指定要应用哪些字体族调色板值。这需要与设置 CSS font-family 时使用的值完全匹配。

语法

css
@font-palette-values --Dark-mode {
  font-family: "Bungee Spice";
  /* other palette settings follow */
}

后续的其他调色板值仅适用于指定的字体族。您可以使用相同的 <dashed-ident>s 为其他字体族创建 @font-palette-values。这意味着如果您有多个彩色字体，则可以为每个字体使用相同的标识符。

值

<family-name>

指定 font-family 的名称。

正式定义

相关 @规则@font-palette-values
初始值n/a（必需）
计算值按指定

正式语法

font-family = 
  <family-name>#  

<family-name> = 
  <string>         |
  <custom-ident>+

示例

使用匹配的字体族名称

在此示例中，当在 @font-palette-values @规则中使用 font-family 描述符时，与声明时一样，使用相同的值用于 font-family。

HTML

html
<h2>This is spicy</h2>
<h2 class="extra-spicy">This is extra hot & spicy</h2>

CSS

css
@import url(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";
}

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";
}

h2 {
  font-family: Bixa;
}

规范

规范
CSS 字体模块级别 4
# font-family-2-desc

浏览器兼容性

BCD 表仅在浏览器中加载

另请参阅