如何用JavaScript替代font-feature-settings: "case" 1？打印PDF兼容问题

方法1：永久修改DOM文本为大写 #

如果不需要保留原文本的小写状态，可直接遍历目标元素将文本转为大写：

// 选择所有需要转大写的元素（示例：带.capitalize-text类的元素）
const targetElements = document.querySelectorAll('.capitalize-text');
targetElements.forEach(element => {
  element.textContent = element.textContent.toUpperCase();
});

这种方式彻底替换文本内容，打印生成的PDF在Adobe Illustrator中打开不会出现字体特性引发的乱码问题。

方法2：打印前临时转换，打印后恢复（不影响页面显示） #

若需保留页面原有显示状态，仅在打印时转大写，可结合打印事件流程处理：

// 存储原文本，用于打印后恢复
const originalContentMap = new Map();

// 打印前预处理文本
function setupPrintMode() {
  const targetElements = document.querySelectorAll('.capitalize-text');
  targetElements.forEach(el => {
    originalContentMap.set(el, el.textContent);
    el.textContent = el.textContent.toUpperCase();
  });
}

// 打印后恢复原文本
function resetPrintMode() {
  originalContentMap.forEach((originalText, el) => {
    el.textContent = originalText;
  });
  originalContentMap.clear();
}

// 绑定打印按钮点击事件
document.querySelector('#print-button').addEventListener('click', () => {
  setupPrintMode();
  // 延迟打印确保DOM更新完成
  setTimeout(() => {
    window.print();
    // 打印对话框关闭后恢复页面状态
    resetPrintMode();
  }, 100);
});

此方案仅在打印流程中临时修改文本，不影响用户日常浏览，同时规避了CSS font-feature-settings 的兼容性问题。

备选方案：用CSS text-transform: uppercase 替代 #

如果不想引入JavaScript，可尝试使用兼容性更好的CSS属性替代原字体特性：

.capitalize-text {
  text-transform: uppercase;
  /* 移除原有的 font-feature-settings: "case" 1 */
}

该属性的渲染逻辑更通用，多数情况下不会出现Adobe Illustrator打开乱码的问题，建议优先测试。

内容的提问来源于stack exchange，提问作者Y U K I M U R A