使用 javascript 激活的 font-feature-settings 功能答案

【问题标题】：font-feature-settings features activated using javascript使用 javascript 激活的 font-feature-settings 功能
【发布时间】：2017-10-11 19:36:09
【问题描述】：

如何使用 Javascript 激活和停用字体功能设置中的功能？

例如，如果我们的文本使用：

font-feature-settings: "ss01", "liga";

我们如何将“ss02”添加到该列表中？还是去掉“ss01”而保留“liga”？

字体中有 12 种不同的风格集以及另外六种基本功能，因此使用 css 类 (classList) 很快就会失控。

谢谢！

【问题讨论】：

标签： javascript css fonts webfonts

【解决方案1】：

这就是我最终的做法：

我创建了一个作为基本字体功能设置的变量（包括 liga 和 kern，因为您应该始终打开 ligatures 和 kerning）。

然后查看复选框以查看已打开的内容。功能代码已添加到变量中。

到了实现的时候，现有的 fontFeatureSettings 被删除了，然后我们得到了任何现有的样式属性并添加了新的 font-feature-settings。设置属性就完成了。

function changeSS()     { 
    var function_on = "font-feature-settings: 'liga' 1, 'kern' 1,"

        if (document.getElementById("ss01").checked) { function_on += "'ss01' 1," };
        if (document.getElementById("ss02").checked) { function_on += "'ss02' 1," };
        if (document.getElementById("ss03").checked) { function_on += "'ss03' 1," };
        if (document.getElementById("ss04").checked) { function_on += "'ss04' 1," };

        function_on = function_on.slice(0,-1)+";"

        var txt = document.getElementsByClassName("text");
        for (i = 0; i < txt.length; i++) {
            txt[i].style.fontFeatureSettings = null; // nuke existing features
            var s = txt[i].style.cssText // get existing styles, then add font-feature-settings
            s += " " + function_on
            txt[i].setAttribute("style", s);
        }

【讨论】：