React项目本地localhost与线上站点letterSpacing不一致问题求助

本地localhost开发时页面字符间距显示正常，部署到线上站点后，letterSpacing出现异常增大，部署过程未做任何代码或样式修改。

附对比图：

• 本地效果：
• 线上效果：

注：图中红色标记为字符间距异常增大的部分，蓝色标记为仍与本地一致的少数区域。

排查及解决方法 #

• 检查字体加载状态：线上环境可能未正确加载本地使用的字体，浏览器自动 fallback 到系统字体导致间距变化。打开浏览器控制台Network面板，确认字体文件是否成功加载，检查文件路径是否正确、跨域配置是否生效。
• 验证编译后的CSS：部署工具的生产压缩可能错误修改了letter-spacing属性值，比如把normal或0转换成了其他数值。直接查看线上站点的编译后CSS文件，对比目标元素的该属性值与本地开发环境是否一致。
• 明确字体声明：不同浏览器或设备对字体的渲染存在差异，给文本元素添加明确的font-family规则，指定优先加载的字体，并补充通用字体族（如sans-serif）作为 fallback。
• 清除浏览器缓存：线上浏览器可能缓存了旧版CSS，导致样式未更新。强制刷新页面（Ctrl+Shift+R），或在部署时给CSS文件名添加哈希后缀（如style.abc123.css）避免缓存问题。
• 统一测试环境：如果在不同设备上测试，设备的系统字体缩放、字符间距设置可能影响显示，确保使用相同设备和系统设置进行对比验证。

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