font-family

Cú pháp

@font-palette-values --Dark-mode {
  font-family: "Bungee Spice";
  /* các thiết lập palette khác tiếp theo */
}

Các giá trị palette khác theo sau chỉ áp dụng cho font-family được chỉ định. Bạn có thể tạo các @font-palette-values cho các font-family khác bằng cách dùng cùng <dashed-ident>s. Điều này có nghĩa là nếu bạn có nhiều Color Font, bạn có thể dùng cùng một định danh cho mỗi font.

Giá trị

<family-name>

Chỉ định tên của font-family.

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

Cú pháp chính thức

font-family = 
  <family-name>#  

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

Ví dụ

Sử dụng tên family khớp nhau

Trong ví dụ này, khi descriptor font-family được dùng trong at-rule @font-palette-values, cùng giá trị đó được dùng cho font-family, như khi nó được khai báo.

HTML

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

CSS

@import "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", fantasy;
}

h2.extra-spicy {
  font-palette: --bungee-extra-spicy;
}

Kết quả

Sử dụng cùng định danh palette cho nhiều font-family

Trong ví dụ này, hai at-rule @font-palette-values được đặt cho hai font-family, nhưng cả hai at-rule đều sử dụng cùng định danh dashed-ident là --Dark-Mode. Điều này giúp đặt thuộc tính font-palette cho nhiều phần tử, h1 và h2 trong trường hợp này, cùng một lúc. Điều này có thể hữu ích khi bạn muốn cập nhật màu font để phù hợp với thương hiệu của trang web.

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

Đặc tả

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

Xem thêm

• font-family
• @font-palette-values
• Descriptor override-colors
• Thuộc tính font-palette
• CSSFontPaletteValuesRule.fontFamily