CODEWITHSUNDEEP
javascriptcssfonts
user12154304
user12154304

Reputation:

Add multiple values and names to a CSS style property

I'm currently loading a font with Font.js. The font has multiple AXIS values that I want to animate. It's rather simple because of the CSS property font-variation-settings.

Problem: I can't set the CSS property. The font-variation-settings needs to be displayed like

.class{
 font-variation-settings: "wght" 200, "slnt" 150, "mono" 0;
}

How can I add those attributes to the CSS? I can't use commands like container.style.setProperty(slider.id, slider.value), because that would just add one AXIS to the property.

Upvotes: 1

Views: 215

Answers (1)

Jon Sakas
Jon Sakas

Reputation: 2232

You could store the values in an object and map them into the style property like this:

var axes = {
    'wght': 200,
    'slnt': 150,
    'mono': 0,
}

function makeFontVariationSettings(obj) {
    return Object.keys(obj)
        .map(function(key) { 
            return `"${key}" ${obj[key]}`; 
        })
        .join(', ');
}

var fontVariationSettings = makeFontVariationSettings(axes);
container.style.setProperty('font-variation-settings', fontVariationSettings);

Upvotes: 2

Related Questions