寻求可累积设置@font-feature-settings的UI实现方案

HTML 结构 #

先搭建复选框组和预览文本区域，每个复选框的value对应字体特性的标签名：

<!-- 字体特性选择区 -->
<div class="font-features">
  <label><input type="checkbox" value="ss01"> 样式集1 (ss01)</label>
  <label><input type="checkbox" value="ss10"> 样式集10 (ss10)</label>
  <label><input type="checkbox" value="dlig"> 自定义连字 (dlig)</label>
  <label><input type="checkbox" value="smcp"> 小型大写字母 (smcp)</label>
  <!-- 根据字体支持的特性添加更多选项 -->
</div>

<!-- 预览文本容器 -->
<div id="text-preview">Schulschrift 测试文本：ABCDEFG abcdefg 12345</div>

基础 CSS #

设置预览文本的字体和基础样式：

#text-preview {
  font-family: "Schulschrift", sans-serif; /* 替换为你的目标字体 */
  font-size: 2.5rem;
  margin: 2rem 0;
  line-height: 1.5;
}

.font-features label {
  display: block;
  margin: 0.6rem 0;
  cursor: pointer;
}

JavaScript 核心逻辑 #

通过监听复选框状态，动态拼接并应用字体特性组合：

// 获取DOM元素
const textPreview = document.getElementById('text-preview');
const featureCheckboxes = document.querySelectorAll('.font-features input[type="checkbox"]');

// 给每个复选框绑定状态变化事件
featureCheckboxes.forEach(checkbox => {
  checkbox.addEventListener('change', updateFontFeatures);
});

// 更新字体特性的函数
function updateFontFeatures() {
  const activeFeatures = [];
  // 遍历所有复选框，收集选中的特性
  featureCheckboxes.forEach(checkbox => {
    if (checkbox.checked) {
      // 按CSS语法格式拼接特性：'特性名' on
      activeFeatures.push(`'${checkbox.value}' on`);
    }
  });
  // 将特性数组转为逗号分隔的字符串，应用到预览元素
  textPreview.style.fontFeatureSettings = activeFeatures.join(', ');
}

// 页面加载时初始化一次
updateFontFeatures();

关键说明 #

1. 每个复选框的value直接对应字体内置的特性标签（如ss01），无需额外映射
2. 每次复选框状态变化时，都会重新收集所有选中的特性，确保组合效果是累积的
3. 若需要关闭默认开启的特性，可把逻辑改为：选中时添加'特性名' off

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