base-palette

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since November 2022.

Descriptor CSS base-palette được dùng để chỉ định tên hoặc chỉ mục của một palette được định nghĩa sẵn để tạo palette mới. Nếu base-palette được chỉ định không tồn tại, palette được định nghĩa tại chỉ mục 0 sẽ được sử dụng.

Cú pháp

css

@font-palette-values --one {
  base-palette: 1;
}

Descriptor base-palette được chỉ định bằng chỉ mục bắt đầu từ 0 của các palette được tạo bởi nhà thiết kế font.

Giá trị

<index>: Chỉ định chỉ mục của palette được định nghĩa sẵn cần sử dụng.

Định nghĩa chính thức

Related at-rule	`@font-palette-values`
Initial value	`n/a (required)`
Computed value	as specified

Cú pháp chính thức

base-palette = 
  light            |
  dark             |
  <integer [0,∞]>  

<integer> = 
  <number-token>

Ví dụ

Thay đổi palette mặc định trong một font

Sử dụng Rocher Color Font, ví dụ này cho thấy hai trường hợp chuyển đổi palette mặc định trong font sang một palette thay thế được tạo bởi nhà thiết kế font.

HTML

html

<h2>default base-palette</h2>
<h2 class="two">base-palette at index 2</h2>
<h2 class="five">base-palette at index 5</h2>

CSS

css

@font-face {
  font-family: "Rocher";
  src: url("[path-to-font]/RocherColorGX.woff2") format("woff2");
}

h2 {
  font-family: "Rocher", fantasy;
}

@font-palette-values --two {
  font-family: "Rocher";
  base-palette: 2;
}

@font-palette-values --five {
  font-family: "Rocher";
  base-palette: 5;
}

.two {
  font-palette: --two;
}

.five {
  font-palette: --five;
}

Kết quả

Ví dụ cho thấy 3 base-palette khác nhau của font màu Rocher

Đặc tả

Specification
CSS Fonts Module Level 4 # base-palette-desc

Tương thích trình duyệt

Xem thêm

Help improve MDN

Learn how to contribute

This page was last modified on Jan 1, 1970 by MDN contributors.

View this page on GitHub • Report a problem with this content