Flutter Web应用移动端浏览器文本自动倾斜问题求助

• 检查自定义字体文件本身
  移动端浏览器对字体的解析逻辑和PC端存在差异，先确认Nordeco和Brasley这两个自定义字体文件，是否包含对应字重（w900、w600）的正常非倾斜版本。部分字体可能默认仅提供斜体字形，或字重映射错误，导致移动端浏览器强制渲染为斜体。可以用本地字体查看工具直接打开字体文件，验证目标字重的字形样式。

• 明确配置字体的字重与样式映射
  在pubspec.yaml的字体配置中，为每个自定义字体的具体文件明确指定字重和样式，避免浏览器自动推断出错。示例配置：

  fonts:
    - family: Nordeco
      fonts:
        - asset: fonts/Nordeco-Black.ttf
          weight: 900
          style: normal
    - family: Brasley
      fonts:
        - asset: fonts/Brasley-SemiBold.ttf
          weight: 600
          style: normal
  

  注意要保证字体文件的实际字重和配置里的weight值完全匹配，移动端对字重的容错性远低于PC端。

• 排查全局样式或浏览器默认设置干扰
  检查移动端浏览器是否开启了无障碍类的文本倾斜设置，或者你的Flutter Web应用通过index.html引入的全局CSS是否意外给文本添加了font-style: italic样式。可以通过移动端浏览器的开发者工具，查看文本元素的实际CSS属性，确认是否有外部样式覆盖了Flutter设置的字体样式。

• 替换为系统默认字体测试
  临时将代码中的fontFamily替换为系统默认字体（比如sans-serif），如果文本恢复正常，说明问题根源在自定义字体的移动端兼容性上。此时可以考虑更换为移动端支持更好的字体，或者用字体处理工具重新转换字体文件，确保包含完整的字形信息。

• 排查动态字体大小与布局的影响
  你代码中使用了基于屏幕宽度的动态字体大小（如8/100 * screenWidth），移动端高DPI屏幕可能导致字体渲染时出现异常拉伸或样式偏移。尝试固定字体大小（比如使用24.sp）测试，看是否还会出现倾斜问题。另外，显式将RichText的textScaleFactor设置为1.0，排查是否受系统缩放影响。

• 切换Flutter Web渲染模式验证
  Flutter Web有HTML和CanvasKit两种渲染模式，移动端默认可能使用HTML渲染，PC端则用CanvasKit。两种模式的字体处理逻辑不同，CanvasKit的渲染一致性更高。可以在index.html中添加以下代码强制切换为CanvasKit渲染，测试问题是否解决：

  <script>window.flutterWebRenderer = "canvaskit";</script>
  

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