font-variant-alternates

Cú pháp

/* Giá trị từ khóa */
font-variant-alternates: normal;
font-variant-alternates: historical-forms;

/* Giá trị ký hiệu hàm */
font-variant-alternates: stylistic(user-defined-ident);
font-variant-alternates: styleset(user-defined-ident);
font-variant-alternates: character-variant(user-defined-ident);
font-variant-alternates: swash(user-defined-ident);
font-variant-alternates: ornaments(user-defined-ident);
font-variant-alternates: annotation(user-defined-ident);
font-variant-alternates: swash(ident1) annotation(ident2);

/* Giá trị toàn cục */
font-variant-alternates: inherit;
font-variant-alternates: initial;
font-variant-alternates: revert;
font-variant-alternates: revert-layer;
font-variant-alternates: unset;

Thuộc tính này có thể có một trong hai dạng:

• hoặc từ khóa normal
• hoặc một hoặc nhiều từ khóa và hàm khác được liệt kê bên dưới, phân tách bằng dấu cách, theo bất kỳ thứ tự nào.

Giá trị

normal

Từ khóa này hủy kích hoạt các glyph thay thế.

historical-forms

Từ khóa này kích hoạt các dạng lịch sử — các glyph phổ biến trong quá khứ nhưng không còn ngày nay. Nó tương ứng với giá trị OpenType hist.

stylistic()

Hàm này kích hoạt các biến thể kiểu dáng cho từng ký tự. Tham số là tên đặc trưng của phông chữ được ánh xạ thành một số. Nó tương ứng với giá trị OpenType salt, như salt 2.

styleset()

Hàm này kích hoạt các biến thể kiểu dáng cho tập hợp các ký tự. Tham số là tên đặc trưng của phông chữ được ánh xạ thành một số. Nó tương ứng với giá trị OpenType ssXY, như ss02.

character-variant()

Hàm này kích hoạt các biến thể kiểu dáng cụ thể cho các ký tự. Nó tương tự như styleset(), nhưng không tạo ra các glyph nhất quán cho một tập hợp ký tự; các ký tự riêng lẻ sẽ có kiểu dáng độc lập và không nhất thiết phải nhất quán. Tham số là tên đặc trưng của phông chữ được ánh xạ thành một số. Nó tương ứng với giá trị OpenType cvXY, như cv02.

swash()

Hàm này kích hoạt các glyph swash. Tham số là tên đặc trưng của phông chữ được ánh xạ thành một số. Nó tương ứng với các giá trị OpenType swsh và cswh, như swsh 2 và cswh 2.

ornaments()

Hàm này kích hoạt các trang trí, như fleurons và các glyph dingbat khác. Tham số là tên đặc trưng của phông chữ được ánh xạ thành một số. Nó tương ứng với giá trị OpenType ornm, như ornm 2.

Note: Để bảo toàn ngữ nghĩa văn bản, các nhà thiết kế phông chữ nên bao gồm các trang trí không khớp với các ký tự dingbat Unicode như các biến thể trang trí của ký tự dấu đầu dòng (U+2022). Lưu ý rằng một số phông chữ hiện có không tuân theo khuyến nghị này.

annotation()

Hàm này kích hoạt các chú thích, như các chữ số trong vòng tròn hoặc các ký tự đảo ngược. Tham số là tên đặc trưng của phông chữ được ánh xạ thành một số. Nó tương ứng với giá trị OpenType nalt, như nalt 2.

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

Cú pháp hình thức

font-variant-alternates = 
  normal                                              |
  [ stylistic( <feature-value-name> ) || historical-forms || styleset( <feature-value-name># ) || character-variant( <feature-value-name># ) || swash( <feature-value-name> ) || ornaments( <feature-value-name> ) || annotation( <feature-value-name> ) ]  

<feature-value-name> = 
  <ident>  

Ví dụ

Kích hoạt các glyph swash

Trong ví dụ này, chúng ta sử dụng quy tắc at @font-feature-values để định nghĩa tên cho tính năng swash của phông chữ MonteCarlo. Quy tắc ánh xạ tên "fancy" thành giá trị chỉ số 1.

Sau đó, chúng ta có thể sử dụng tên đó bên trong font-variant-alternates để bật swash cho phông chữ đó. Điều này tương đương với một dòng như font-feature-settings: "swsh" 1, ngoại trừ việc CSS áp dụng tính năng không cần phải bao gồm, hoặc thậm chí biết, giá trị chỉ số cần thiết cho phông chữ cụ thể này.

HTML

<p>A Fancy Swash</p>
<p class="variant">A Fancy Swash</p>

CSS

@font-face {
  font-family: "MonteCarlo";
  src: url("/shared-assets/fonts/monte-carlo/monte-carlo-regular.woff2");
}

@font-feature-values "MonteCarlo" {
  @swash {
    fancy: 1;
  }
}

p {
  font-family: "MonteCarlo", cursive;
  font-size: 3rem;
  margin: 0.7rem 3rem;
}

.variant {
  font-variant-alternates: swash(fancy);
}

Kết quả

Thông số kỹ thuật

Khả năng tương thích trình duyệt

Xem thêm

• font-variant
• font-variant-caps
• font-variant-east-asian
• font-variant-emoji
• font-variant-ligatures
• font-variant-numeric
• font-variant-position
• @font-feature-values
• font-feature-settings