如何使用JavaScript修改font-feature-settings属性

你的代码思路没问题，但要让样式集正常生效，需要调整几个细节：

• fontFeatureSettings的正确语法：必须给样式集名称加引号，同时指定启用状态，格式应为 'ss01' on
• 确认字体支持对应样式集：你使用的字体必须包含ss01这个预设样式集，否则不会有视觉变化

调整后的基础实现代码 #

<p id="demo">B</p>

<button type="button" onclick="document.getElementById('demo').style.fontFeatureSettings = '\'ss01\' on'">切换ss01样式</button>

扩展：切换样式/恢复默认的逻辑 #

如果需要在启用样式集和恢复默认之间切换，可以用以下代码：

<p id="demo">B</p>

<button type="button" onclick="toggleStyleSet()">切换ss01样式</button>

<script>
function toggleStyleSet() {
  const elem = document.getElementById('demo');
  // 判断当前是否启用了ss01
  if (elem.style.fontFeatureSettings === '\'ss01\' on') {
    // 恢复默认样式
    elem.style.fontFeatureSettings = 'normal';
  } else {
    // 启用ss01样式集
    elem.style.fontFeatureSettings = '\'ss01\' on';
  }
}
</script>

更优雅的方案：用CSS类管理样式 #

推荐通过切换CSS类来实现，代码更易维护：

<p id="demo">B</p>

<button type="button" onclick="document.getElementById('demo').classList.toggle('ss01')">切换ss01样式</button>

<style>
.ss01 {
  font-feature-settings: 'ss01' on;
}
</style>

内容的提问来源于stack exchange，提问作者Einar Zotterman