Next.js项目中符号/数字被奇怪演示图标替换问题求助

• 本地运行基于Next.js（搭配Sanity与styled-components）的项目时，出现异常：部分符号、数字及标点（如,.-&等）被奇怪的演示图标替换，字母不受影响
• 替换情况不一致，同一符号可能在部分位置正常显示，部分位置被替换。比如原本应显示「左侧减号、中间数字、右侧加号」的计数器，显示效果异常（见下图）

项目依赖配置（package.json） #

{
  "dependencies": {
    "@portabletext/react": "^3.0.0",
    "@sanity/client": "^5.4.2",
    "@sanity/image-url": "^1.0.2",
    "@types/node": "18.15.11",
    "@types/react": "18.0.34",
    "@types/react-dom": "18.0.11",
    "eslint": "8.38.0",
    "eslint-config-next": "13.3.0",
    "next": "13.3.0",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "styled-components": "^5.3.9",
    "typescript": "5.0.4"
  },
  "resolutions": {
    "styled-components": "^5"
  },
  "devDependencies": {
    "@types/styled-components": "^5.1.26",
    "babel-plugin-styled-components": "^2.1.1",
    "csstype": "^3.1.2"
  }
}

排查方向 #

• 字体加载问题：检查styled-components中的全局/局部字体设置，确认使用的字体文件是否包含数字、符号的字符集。部分自定义字体可能仅包含字母，缺失数字和符号时会 fallback 到系统默认的错误字体。
• Portable Text渲染冲突：@portabletext/react的自定义渲染器可能对数字、符号做了特殊处理，排查Portable Text的组件配置，是否有规则误将这些字符替换为图标。
• Next.js字体优化冲突：Next.js 13的字体优化功能可能和styled-components的字体设置冲突，导致字符渲染时选择了错误的字体 fallback。
• 内容字符编码问题：检查Sanity后台的内容，确认数字、符号是标准ASCII字符，而非特殊编码的字符（如全角符号），避免前端渲染时无法识别。

内容的提问来源于stack exchange，提问作者s.sand