CSSFontPaletteValuesRule
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since November 2022.
Giao diện CSSFontPaletteValuesRule đại diện cho quy tắc at-rule @font-palette-values.
Thuộc tính phiên bản
Kế thừa các thuộc tính từ tổ tiên của nó CSSRule.
CSSFontPaletteValuesRule.nameRead only-
Một chuỗi biểu thị tên của bảng màu phông chữ.
CSSFontPaletteValuesRule.fontFamilyRead only-
Một chuỗi cho biết bộ phông chữ mà quy tắc áp dụng.
CSSFontPaletteValuesRule.basePaletteRead only-
Một chuỗi biểu thị bảng màu cơ sở liên quan đến quy tắc này.
CSSFontPaletteValuesRule.overrideColorsRead only-
Một chuỗi biểu thị màu của bảng màu cơ sở được ghi đè và các giá trị màu mới.
Phương thức phiên bản
Không có phương thức nào cụ thể; kế thừa các phương thức từ tổ tiên của nó CSSRule.
Ví dụ
Đọc các giá trị @font-palette-values liên quan
Ví dụ này định nghĩa @font-palette-values trong stylesheet và sau đó ghi chú nó bằng JavaScript.
HTML
html
<div class="hat">
<div class="emoji">🎩</div>
</div>
<div class="logs"></div>
CSS
css
@import url(https://fonts.googleapis.com/css2?family=Boogaloo&display=swap);
.hat {
font-family: "Boogaloo";
font-palette: --melting-pot;
font-size: 9rem;
}
@font-palette-values --melting-pot {
font-family: "Boogaloo";
base-palette: 2;
override-colors:
0 hotpink,
1 cyan,
3 green;
}
JavaScript
js
const rules = document.styleSheets[document.styleSheets.length - 1].cssRules;
const fontPaletteValuesRule = [...rules].find(
(r) => r instanceof CSSFontPaletteValuesRule,
);
const logs = document.querySelector(".logs");
if (fontPaletteValuesRule) {
logs.innerHTML = `<div><code>name:</code> ${fontPaletteValuesRule.name}</div>
<div><code>font-family:</code> ${fontPaletteValuesRule.fontFamily}</div>
<div><code>base-palette:</code> ${fontPaletteValuesRule.basePalette}</div>
<div><code>override-colors:</code> ${fontPaletteValuesRule.overrideColors}</div>`;
}
Kết quả
Thông số kỹ thuật
| Specification |
|---|
| CSS Fonts Module Level 4 # om-fontpalettevalues |