CSSFontFeatureValuesRule

Thuộc tính phiên bản

Kế thừa các thuộc tính từ tổ tiên CSSRule.

CSSFontFeatureValuesRule.annotation Experimental

Định nghĩa và giá trị do người dùng xác định, áp dụng chú thích thay thế của font.

CSSFontFeatureValuesRule.characterVariant Experimental

Định nghĩa và giá trị do người dùng xác định, áp dụng các lựa chọn kiểu thay thế cho các ký tự của font.

CSSFontFeatureValuesRule.fontFamily

Một chuỗi xác định họ font mà quy tắc này áp dụng.

CSSFontFeatureValuesRule.ornaments Experimental

Định nghĩa và giá trị do người dùng xác định, áp dụng các trang trí thay thế của font.

CSSFontFeatureValuesRule.styleset Experimental

Định nghĩa và giá trị do người dùng xác định, áp dụng các bộ kiểu thay thế của font.

CSSFontFeatureValuesRule.stylistic Experimental

Định nghĩa và giá trị do người dùng xác định, áp dụng các glyph thay thế của font.

CSSFontFeatureValuesRule.swash Experimental

Định nghĩa và giá trị do người dùng xác định, áp dụng các swash thay thế của font.

Phương thức phiên bản

Kế thừa các phương thức từ tổ tiên CSSRule.

Ví dụ

Đọc họ font

Trong ví dụ này, chúng ta khai báo hai @font-feature-values: một cho họ font Font One và một cho Font Two. Trong cả hai khai báo, chúng ta định nghĩa rằng tên "nice-style" có thể được dùng để đại diện cho các glyph thay thế của styleset cho cả hai font, chỉ định chỉ mục cho glyph thay thế đó trong mỗi họ font. Các glyph thay thế sau đó được áp dụng cho bất kỳ class .nice-look nào, sử dụng font-variant-alternates và truyền tên cho hàm styleset().

Sau đó chúng ta sử dụng CSSOM để đọc các khai báo này dưới dạng các phiên bản CSSFontFeatureValuesRule, hiển thị chúng vào log.

CSS

/* At-rule for "nice-style" in Font One */
@font-feature-values Font One {
  @styleset {
    nice-style: 12; /* name used to represent the alternate set of glyphs at index 12 */
  }
}

/* At-rule for "nice-style" in Font Two */
@font-feature-values Font Two {
  @styleset {
    nice-style: 4;
  }
}

/* Apply the at-rules with a single declaration */
.nice-look {
  font-variant-alternates: styleset(
    nice-style
  ); /* name selects different index for same alternate in different fonts */
}

<pre id="log"></pre>

#log {
  height: 40px;
  overflow: scroll;
  padding: 0.5rem;
  border: 1px solid black;
}

JavaScript

const logElement = document.querySelector("#log");
function log(text) {
  logElement.innerText = `${logElement.innerText}${text}\n`;
  logElement.scrollTop = logElement.scrollHeight;
}

const rules = document.getElementById("css-output").sheet.cssRules;

const fontOne = rules[0]; // A CSSFontFeatureValuesRule
log(`The 1st '@font-feature-values' family: "${fontOne.fontFamily}".`);

const fontTwo = rules[1]; // Another CSSFontFeatureValuesRule
log(`The 2nd '@font-feature-values' family: "${fontTwo.fontFamily}"`);

Thông số kỹ thuật

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

Xem thêm

• @font-feature-values