Angular生产环境文本模糊/显示异常，开发环境正常求排查方案

• 检查样式压缩的影响
  临时修改angular.json中生产环境的optimization.styles为false，重新执行ng build打包生产环境。如果文本恢复清晰，说明是样式压缩过程中出现了问题——可能是CSS压缩工具在处理字体渲染相关属性时丢失了精度或破坏了规则。可以进一步排查压缩工具的具体配置，比如是否开启了激进的属性合并或值简化。

• 验证关键样式内联的问题
  关闭生产环境的关键样式内联功能：将angular.json里的optimization.inlineCritical设为false，打包后测试文本渲染。若问题消失，说明内联的关键样式遗漏了全局字体渲染配置（如body上的text-rendering、font-smoothing属性），或者内联样式与外部样式表产生了冲突。

• 对比字体文件的加载状态
  打开浏览器开发者工具的Network面板，分别在开发和生产环境下检查字体文件的加载情况：

  • 确认字体文件的URL、Content-Type、文件大小完全一致
  • 检查是否存在生产环境下字体加载失败、缓存过期或加载了旧版本文件的情况（可通过强制刷新缓存Ctrl+Shift+R测试）

• 排查DOM布局的细微差异
  用浏览器工具对比同一文本元素在开发和生产环境下的计算样式与布局参数：

  • 检查font-size、line-height、font-weight的精确值是否一致
  • 对比元素的offsetWidth、offsetHeight，看是否存在生产环境下的小数像素尺寸（亚像素布局可能导致文本模糊）
  • 确认是否有隐藏的transform、filter等属性在生产环境被意外应用，影响文本渲染

• 测试AOT编译与构建优化的影响
  临时关闭生产环境的AOT编译：将angular.json中production.aot设为false，重新打包。若问题解决，说明AOT编译过程中对样式或模板的处理存在异常。另外，也可以尝试关闭buildOptimizer，排查是否是构建优化工具导致的问题。

• 检查浏览器渲染引擎的差异触发
  开发环境的Angular dev模式会添加调试相关的DOM节点与代码，可能让浏览器使用不同的渲染路径。可以在生产环境构建时开启source map（production.sourceMap设为true），逐行对比元素的计算样式，确认是否有开发环境存在但生产环境缺失的渲染关键属性。

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