Windows Edge与IE10中单个DOM元素Roboto字体被替换问题求助

这问题我之前处理过，Edge和IE10这类老浏览器在动态更新文本内容时，确实容易出现字体样式不继承的情况，咱们一步步来解决：

可能的原因 #

• 老浏览器对自定义字体名称（比如Roboto-Regular）的识别存在兼容性问题，无法正确匹配你定义的字体
• 使用innerHTML更新内容时，浏览器会重新解析元素内容，可能导致原有样式的继承被中断，最终 fallback到系统默认字体（Times New Roman）

解决方案 #

1. 修正字体声明，确保字体能被正确识别 #

首先检查你的字体引入方式，确保Roboto字体已正确加载，同时修改CSS中的字体声明，使用标准的字体名称：

.perc-counter {
  position: absolute;
  color: rgb(32, 33, 36);
  /* 改用标准字体名，同时添加fallback保证兼容性 */
  font-family: 'Roboto', sans-serif;
  font-size: 2.5em;
  top: 185px;
  text-align: right;
  right: 138px;
  opacity: 0;
}

.percentage {
  position: absolute;
  color: rgb(32, 33, 36);
  font-family: 'Roboto', sans-serif;
  font-size: 2.5em;
  top: 185px;
  text-align: left;
  left: 162px;
  opacity: 0;
}

如果是自定义引入的Roboto字体，确保@font-face声明正确：

@font-face {
  font-family: 'Roboto';
  src: url('path/to/roboto-regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

2. 替换innerHTML为textContent更新文本 #

innerHTML会触发HTML解析，老浏览器在这个过程中容易丢失样式继承，改用textContent直接修改文本内容，不会破坏元素原有样式：

var percCounter = document.getElementById("perc-counter");
var percent = document.getElementById("percent");

// 假设counter是你定义的GSAP计数器对象
gsap.to(counter, 1.2, {
  val: newVal,
  roundProps: "val",
  onUpdate: function() {
    // 替换innerHTML为textContent，避免HTML解析导致的样式丢失
    percCounter.textContent = counter.val;
  }
});

3. 额外兜底：强制继承字体样式（可选） #

如果上述方法还不生效，可以给元素添加!important强制字体生效（不推荐过度使用，但针对老浏览器可以作为兜底方案）：

.perc-counter {
  font-family: 'Roboto', sans-serif !important;
}

总结 #

优先用textContent替代innerHTML更新纯文本内容，同时确保字体声明的兼容性，这两个改动基本能解决Edge和IE10中的字体 fallback问题。

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