为什么无法通过JavaScript直接修改font-feature-settings属性？

• fontFeatureSettings 是严格遵循CSS语法规范的DOM样式属性，赋值的字符串必须符合 font-feature-settings 的标准写法：所有4位OpenType特性标签必须用单/双引号包裹，标签后可加空格跟开关状态（1/0 或 on/off），多个特性用逗号分隔。不符合语法的赋值会被浏览器直接丢弃，这就是你赋值后属性为空的核心原因。
• 你原始测试代码中font-size:72缺少单位（如px），也会导致字体大小样式不生效。

<html>
<body>
  <input id="feature" placeholder='示例输入："smcp" 1, "liga" 0' />
  <input type="button" value="修改特性" onclick="
    const inputVal = document.getElementById('feature').value;
    alert('输入值：' + inputVal);
    document.getElementById('display').style.fontFeatureSettings = inputVal;
    alert('实际生效值：' + document.getElementById('display').style.fontFeatureSettings);
  " />
  <div id="display" style="font-size:72px; font-family: 你使用的支持OpenType特性的字体名;">测试文本 123 abc</div>
</body>
</html>

使用说明 #

在输入框填写符合语法的特征规则即可直接生效，比如输入"dlig" on可以开启花式连字，输入"tnum" 1可以开启等宽数字。

如果不想要求用户输入引号，可以在JS层增加输入格式化逻辑，自动处理用户输入的纯文本特征：

function formatFeatureInput(input) {
  // 按逗号拆分多个特征项
  return input.split(',').map(item => {
    const parts = item.trim().split(/\s+/);
    // 给4位特征标签加引号，保留后面的开关值
    return `"${parts[0]}"` + (parts[1] ? ` ${parts[1]}` : '');
  }).join(', ');
}

用户就可以直接输入smcp 1, liga 0这种无引号的内容，格式化后再赋值给fontFeatureSettings即可，无需提前预置CSS类。

内容的提问来源于stack exchange，提问作者Syzygy Yuan