Angular从8版本升级至11版本后字体模糊问题该如何排查解决

• 核对angular.json中生产环境构建配置：Angular 11默认开启了更多生产构建优化项，和v8的默认配置差异较大。重点检查production配置项下的optimization.fonts相关配置，v11默认开启字体子集化、自动内联功能，如果自定义字体文件不兼容该优化，会出现字体渲染模糊问题。同时确认本地开发环境和生产环境的aot、buildOptimizer开关状态差异，开发环境默认关闭上述优化，字体渲染效果会更接近v8版本。
• 检查部署环境的字体资源加载状态：打开浏览器控制台网络面板，过滤font类型请求，确认是否存在404、403、跨域报错，若字体资源加载失败，浏览器会自动降级使用系统默认字体，导致和本地加载完整字体的效果不一致。

• 对比升级前后全局字体栈配置：检查全局样式文件、index.html中定义的font-family、font-weight、line-height属性，确认是否被升级后新增的依赖样式（如Angular Material v11默认样式）覆盖，新版本UI库的默认字体参数调整会导致视觉上的模糊感。
• 检查viewport元标签配置：确认index.html中viewport配置是否为<meta name="viewport" content="width=device-width, initial-scale=1">，如果配置缺失initial-scale=1，部分设备会自动缩放页面导致字体模糊。
• 排查全局缩放属性：Angular 11对组件样式封装的处理有细微调整，检查根组件、全局布局容器是否存在transform: scale()非整数倍缩放属性，该属性会导致整个容器内的字体渲染模糊。

• 临时关闭生产构建优化测试：将angular.json中production配置的optimization字段设为false，打包部署后观察字体效果，如果恢复正常，再逐项开启优化项，定位具体是字体优化、样式优化还是脚本优化导致的问题。
• 禁用字体自动优化：如果定位到是字体优化功能导致的问题，将angular.json中optimization.fonts.inline和optimization.fonts.subset设为false，保持和Angular 8一致的字体加载逻辑。
• 新增全局字体渲染优化样式：在全局样式文件中添加如下配置，强制浏览器使用最优抗锯齿策略渲染字体：

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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