CSSFontFeatureValuesMap: set() method
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The set() method of CSSFontFeatureValuesMap instances adds a new entry with a specified key and value to this CSSFontFeatureValuesMap, or updates an existing entry if the key already exists.
Syntax
js
set(key, value)
Parameters
Return value
The CSSFontFeatureValuesMap object.
Examples
Basic usage
The following example updates the value for swashy and adds a third declaration. This example is using @swash but also works with other feature value blocks.
CSS
css
@font-feature-values "MonteCarlo" {
@swash {
swishy: 1;
swashy: 2;
}
}
JavaScript
js
function logSwashes(value, key) {
console.log(`('${key}') = ${value}`);
}
// get the rules
const myRule = document.styleSheets[0].cssRules[0];
// log current swashes
myRule.swash.forEach(logSwashes); // logs "('swishy') = 1", "('swashy') = 2"
// update swash with the key swashy
myRule.swash.set("swashy", 3);
myRule.swash.forEach(logSwashes); // logs "('swishy') = 1", "('swashy') = 3"
// add new swash with the key swooshy
myRule.swash.set("swooshy", 2);
myRule.swash.forEach(logSwashes); // logs "('swishy') = 1", "('swooshy') = 2", "('swashy') = 3"
Specifications
| Specification |
|---|
| CSS Fonts Module Level 4 # dom-cssfontfeaturevaluesmap-set |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
set
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
- Experimental. Expect behavior to change in the future.