CSSFontPaletteValuesRule
CSSFontPaletteValuesRule
接口表示 @font-palette-values
at 规则。
实例属性
继承自其祖先 CSSRule
的属性。
CSSFontPaletteValuesRule.name
只读-
包含字体调色板名称的字符串。
CSSFontPaletteValuesRule.fontFamily
只读-
指示必须应用规则的字体系列的字符串。
CSSFontPaletteValuesRule.basePalette
只读-
指示与规则关联的基本调色板的字符串。
CSSFontPaletteValuesRule.overrideColors
只读-
指示被覆盖的基本调色板的颜色以及新颜色的字符串。
实例方法
继承自其祖先 CSSRule
的方法。
示例
使用 CSSOM 读取关联的字体系列
此示例首先定义一个 @import
和一个 @font-palette-values
at 规则。然后它读取 @font-palette-values
规则并显示其名称。由于这些规则存在于添加到文档的最后一个样式表中,因此调色板将是文档中最后一个样式表(document.styleSheets[document.styleSheets.length-1].cssRules
)返回的第二个 CSSRule
。因此,rules[1]
返回一个 CSSFontPaletteValuesRule
对象,从中我们可以访问 fontFamily
。
HTML
html
<pre id="log">The @font-palette-values at-rule font families:</pre>
CSS
css
@import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);
@font-palette-values --Alternate {
font-family: "Bungee Spice";
override-colors:
0 #00ffbb,
1 #007744;
}
.alternate {
font-palette: --Alternate;
}
JavaScript
js
const log = document.getElementById("log");
const rules = document.styleSheets[document.styleSheets.length - 1].cssRules;
const fontPaletteValuesRule = rules[1]; // aA CSSFontPaletteValuesRule interface
log.textContent += ` ${fontPaletteValuesRule.fontFamily}`;
结果
规范
规范 |
---|
CSS 字体模块级别 4 # om-fontpalettevalues |
浏览器兼容性
BCD 表格仅在启用 JavaScript 的浏览器中加载。