@font-palette-values

Cú pháp

@font-palette-values --identifier {
  font-family: "Bixa";
}
.my-class {
  font-palette: --identifier;
}

<dashed-ident> là định danh do người dùng xác định, mặc dù trông giống như thuộc tính tùy chỉnh CSS nhưng hoạt động theo cách khác và không được bọc trong hàm CSS var().

Các descriptor

base-palette

Chỉ định tên hoặc chỉ mục của base-palette, được tạo bởi nhà thiết kế font, để sử dụng.

font-family

Chỉ định tên font-family mà palette này có thể áp dụng. Tên font-family là bắt buộc để quy tắc @font-palette-values có hiệu lực.

override-colors

Chỉ định các màu trong base palette cần ghi đè.

Cú pháp chính thức

@font-palette-values = 
  @font-palette-values <dashed-ident> { <declaration-list> }  

Ví dụ

Ghi đè màu trong một palette hiện có

Ví dụ này cho thấy cách bạn có thể thay đổi một số hoặc tất cả màu trong một font màu.

HTML

<p>default colors</p>
<p class="alternate">alternate colors</p>

CSS

@import "https://fonts.googleapis.com/css2?family=Bungee+Spice";
p {
  font-family: "Bungee Spice", fantasy;
  font-size: 2rem;
}
@font-palette-values --Alternate {
  font-family: "Bungee Spice";
  override-colors:
    0 #00ffbb,
    1 #007744;
}
.alternate {
  font-palette: --Alternate;
}

Kết quả

Khi ghi đè màu của palette thông thường hoặc base-palette tại chỉ mục 0, bạn không cần khai báo base-palette nào sẽ sử dụng. Điều này chỉ cần thực hiện khi ghi đè một base-palette khác. Nếu bạn đang ghi đè tất cả màu thì cũng không cần chỉ định base-palette để sử dụng.

Đặc tả

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

Xem thêm

• Thuộc tính font-palette
• Descriptor font-family
• Descriptor base-palette
• Descriptor override-colors
• CSSFontPaletteValuesRule