javascript - 将多个值和名称添加到 CSS 样式属性

Question

我目前正在使用 Font.js 加载字体。该字体有多个我想要设置动画的 AXIS 值。由于 CSS 属性 font-variation-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);