JavaScript开发记忆翻牌游戏时分数无法在DOM显示问题求助

问题根因 #

你遇到的硬编码数字无法显示、字母可以正常显示的问题，核心原因大概率是你使用的creepy自定义字体没有包含数字字符的字形，所以渲染数字时找不到对应显示样式，出现空白。

排查步骤 #

• 第一步验证字体问题：修改CSS中.overlay-text的字体配置，增加系统默认字体作为 fallback 测试：

.overlay-text{
   /* 原有其他属性保留，仅修改font-family行 */
   font-family: creepy, Arial, sans-serif, serif;
}

修改后如果数字可以正常显示，即可确认是字体缺失数字字符导致的问题。

• 第二步排查其他可能：如果修改字体后依然无法显示，按以下顺序排查：
  1. 打开浏览器控制台的元素面板，选中#score节点，查看计算样式：确认color属性和弹窗背景色不一致，font-size属性大于0，display属性不是none
  2. 全局搜索项目代码，确认id="score"只在胜利弹窗中出现一次，没有重复id导致元素获取错误
  3. 确认你没有其他脚本在胜利弹窗显示时修改了#score的内容或可见性

解决方案 #

确认是字体问题后，可以两种方式解决：

1. 更换包含数字字符的自定义字体替换当前的creepy字体
2. 单独给分数元素指定使用系统字体，不继承父级的自定义字体：

#score {
  font-family: Arial, sans-serif;
}

后续你需要动态设置分数时，直接在victory方法中获取到score元素后修改textContent属性即可，示例：

// 假设你的分数存在this.totalScore变量中
score.textContent = this.totalScore

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