Flutter Web：自定义字体下tabularFigures()移动端失效求助

问题背景 #

使用Flutter默认字体时，FontFeature.tabularFigures()能正常实现数字等宽对齐，但切换为自定义字体Outfit后，该功能仅在PC端Chrome浏览器生效，在iPhone Safari中完全失效，导致数字宽度不一致（对比预期与实际效果）。

相关代码片段：

SizedBox(
  width: 60,
  child: Align(
    alignment: Alignment.centerRight,
    child: Text(
      score(),
      style: TextStyle(
        color: ThemeColorStyles.selectedTheme.kPrimaryFontColor,
        fontSize: 14,
        fontWeight: FontWeight.normal,
        fontFeatures: const [
          FontFeature.tabularFigures(),
        ],
      ),
    ),
  ),
);

预期效果（PC Chrome）：

实际效果（iPhone Safari）：

可能原因 #

1. 所用的Outfit字体文件未包含**tabular figures（等宽数字）**的OpenType特性（即tnum标签缺失），不同浏览器对字体特性的 fallback 逻辑不同，导致Safari无法触发该效果。
2. Flutter Web在iOS Safari环境下，对自定义字体的FontFeature解析存在兼容性问题，无法正确传递字体特性参数。

修复方案 #

1. 验证并替换字体文件 #

• 用字体查看工具（如系统自带的Font Book）检查你的Outfit字体文件，确认是否带有tnum（tabular figures）特性。
• 如果当前字体版本不支持，前往字体官方渠道下载完整特性的版本，确保所选字重（Regular、Bold等）包含等宽数字支持。

2. 通过CSS强制开启字体特性（Flutter Web场景） #

在项目的web/index.html中添加自定义@font-face规则，直接通过CSS强制启用等宽数字特性：

@font-face {
  font-family: 'Outfit';
  src: url('fonts/Outfit-Regular.ttf') format('truetype'); /* 替换为你的字体文件路径 */
  font-feature-settings: 'tnum' 1;
}

这种方式绕过Flutter的FontFeature API，直接让浏览器渲染时启用等宽数字。

3. 手动实现等宽数字布局 #

如果上述方法都无效，可通过代码手动保证数字宽度一致：

SizedBox(
  width: 60,
  child: Align(
    alignment: Alignment.centerRight,
    child: Row(
      mainAxisSize: MainAxisSize.min,
      children: score().split('').map((char) {
        return SizedBox(
          width: 12, // 根据字体大小调整合适的固定宽度
          child: Text(
            char,
            style: TextStyle(
              color: ThemeColorStyles.selectedTheme.kPrimaryFontColor,
              fontSize: 14,
              fontWeight: FontWeight.normal,
              fontFamily: 'Outfit',
            ),
            textAlign: TextAlign.center,
          ),
        );
      }).toList(),
    ),
  ),
);

将每个字符拆分后放入固定宽度的容器中，确保数字对齐。需要根据实际字体大小微调width值。

4. 升级Flutter版本 #

部分旧版本Flutter在iOS Web端存在字体特性的兼容性bug，升级到最新稳定版可能解决该问题。

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