Добавить несколько значений и имен в свойство стиля CSS

Question

Я сейчас загружаю шрифт шрифтом. js. Шрифт имеет несколько значений AXIS, которые я хочу анимировать. Это довольно просто из-за свойства CSS font-var-settings.

Проблема: я не могу установить свойство CSS. Настройки изменения шрифта должны отображаться как

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

Как я могу добавить эти атрибуты в CSS? Я не могу использовать такие команды, как container.style.setProperty(slider.id, slider.value), потому что это просто добавит одну ОСь к свойству.

Answer 1

Вы можете сохранить значения в объекте и отобразить их в свойстве стиля следующим образом:

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);