font-palette

Cú pháp

/* Dùng bảng màu được định nghĩa trong font */
font-palette: normal;

/* Dùng bảng màu do người dùng định nghĩa */
font-palette: --one;

/* Tạo bảng màu mới bằng cách pha trộn hai bảng màu khác */
font-palette: palette-mix(in lch, --blue, --yellow);

Các giá trị

normal

Chỉ định bảng màu mặc định hoặc tô màu glyph mặc định (được đặt bởi nhà tạo font) để dùng cho font. Với cài đặt này, bảng màu trong font ở chỉ số 0 được hiển thị.

light

Chỉ định bảng màu đầu tiên trong font khớp với 'light' để dùng cho font. Một số font chứa siêu dữ liệu xác định bảng màu áp dụng cho nền sáng (gần màu trắng). Nếu font không có siêu dữ liệu này, giá trị light hoạt động như normal.

dark

Chỉ định bảng màu đầu tiên trong font khớp với 'dark' để dùng cho font. Một số font chứa siêu dữ liệu xác định bảng màu áp dụng cho nền tối (gần màu đen). Nếu font không có siêu dữ liệu này, giá trị hoạt động như normal.

<palette-identifier>

Cho phép bạn chỉ định các giá trị riêng cho bảng màu font bằng cách dùng quy tắc at @font-palette-values. Giá trị này được chỉ định bằng định dạng <dashed-ident>.

palette-mix()

Tạo giá trị font-palette mới bằng cách pha trộn hai giá trị font-palette theo tỷ lệ phần trăm và phương pháp nội suy màu được chỉ định.

Định nghĩa hình thức

Cú pháp hình thức

font-palette = 
  normal                |
  light                 |
  dark                  |
  <palette-identifier>  |
  <palette-mix()>       

<palette-identifier> = 
  <dashed-ident>  

<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>? | <custom-color-space> ]  

<rectangular-color-space> = 
  srgb               |
  srgb-linear        |
  display-p3         |
  display-p3-linear  |
  a98-rgb            |
  prophoto-rgb       |
  rec2020            |
  lab                |
  oklab              |
  <xyz-space>        

<polar-color-space> = 
  hsl    |
  hwb    |
  lch    |
  oklch  

<hue-interpolation-method> = 
  [ shorter | longer | increasing | decreasing ] hue  

<custom-color-space> = 
  <dashed-ident>  

<xyz-space> = 
  xyz      |
  xyz-d50  |
  xyz-d65  

Ví dụ

Chỉ định bảng màu tối

Ví dụ này cho phép dùng bảng màu đầu tiên được đánh dấu là dark (hoạt động tốt nhất trên nền gần đen) bởi nhà tạo font.

@media (prefers-color-scheme: dark) {
  .banner {
    font-palette: dark;
  }
}

Hoạt ảnh giữa hai bảng màu

Ví dụ này minh họa cách tạo hoạt ảnh thay đổi giá trị font-palette để tạo hoạt ảnh font mượt mà.

HTML

HTML chứa một đoạn văn bản duy nhất để tạo hoạt ảnh:

<p>color-palette<br />animation</p>

CSS

Trong CSS, chúng ta nhập một font màu có tên Nabla từ Google Fonts, và định nghĩa hai giá trị font-palette tùy chỉnh bằng quy tắc at @font-palette-values. Sau đó chúng ta tạo @keyframes tạo hoạt ảnh giữa hai bảng màu này, và áp dụng hoạt ảnh này cho đoạn văn.

@import "https://fonts.googleapis.com/css2?family=Nabla&display=swap";

@font-palette-values --blue-nabla {
  font-family: "Nabla";
  base-palette: 2; /* đây là bảng màu xanh của Nabla */
}

@font-palette-values --grey-nabla {
  font-family: "Nabla";
  base-palette: 3; /* đây là bảng màu xám của Nabla */
}

@keyframes animate-palette {
  from {
    font-palette: --grey-nabla;
  }

  to {
    font-palette: --blue-nabla;
  }
}

p {
  font-family: "Nabla", fantasy;
  font-size: 5rem;
  margin: 0;
  text-align: center;
  animation: animate-palette 4s infinite alternate linear;
}

Kết quả

Kết quả trông như thế này:

Thông số kỹ thuật

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

Xem thêm

• palette-mix()
• @font-palette-values
• Bộ mô tả base-palette
• Bộ mô tả font-family
• Bộ mô tả override-colors