如何在页面运行时为特定字符指定其他字体解决渲染异常问题

你遇到的渲染异常是因为当前网页使用的自定义字体没有收录「+」字符的矢量轮廓，浏览器找不到对应字形就会调用 fallback 字体渲染，部分场景下字形匹配出错就会显示成1，以下是两种可行的解决方案：

方案1：纯CSS字体回退（优先推荐） #

不需要专门检测加号字符，只要给对应产品标题类设置字体回退栈即可，当前字体缺失的字符会自动调用后续支持的字体渲染，改造成本最低：

.product_title.entry-title {
  /* 把你当前使用的自定义字体放在最前面，后面补Arial等支持加号的通用字体 */
  font-family: [你当前在用的自定义字体名称], Arial, sans-serif;
}

方案2：JS动态包裹加号单独指定字体 #

如果你的自定义字体还有其他缺字问题，只想单独处理加号的渲染，避免其他无关字符也触发回退，可以用JS匹配所有对应类里的加号，用span包裹后单独设置字体：
首先新增专属样式：

.fix-plus-char {
  font-family: Arial, sans-serif;
}

然后加入JS逻辑：

document.addEventListener('DOMContentLoaded', function() {
  // 选中所有产品标题元素
  const productTitles = document.querySelectorAll('.product_title.entry-title');
  productTitles.forEach(title => {
    // 匹配所有+字符，替换为带专属类的span包裹版本
    title.innerHTML = title.textContent.replace(/\+/g, '<span class="fix-plus-char">+</span>');
  });
});

如果你的标题内部还有其他自定义HTML标签，不要直接用innerHTML替换，可以改用遍历文本节点的方式处理，避免破坏原有标签结构。

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