Flutter web 端字体字重无法正常支持问题咨询

字重失效原因 #

这个问题由两个层面的原因导致：

• Flutter Web默认内置的Roboto为精简子集，仅包含*400（常规）和700（粗体）*两个字重的字体文件，其余字重没有被打包到构建产物中。当你调用未被加载的字重时，浏览器会自动就近匹配已有字重，最终呈现为w100-w500全部显示为常规、w600-w900全部显示为粗体的效果。
• 若你是手动引入Roboto字体而非用框架内置版本，需要检查pubspec.yaml中的字体配置是否为每个字重单独指定了对应的字体文件，漏写字重映射也会触发浏览器的自动 fallback 逻辑。
• iOS平台系统内置了完整的Roboto全字重文件，Flutter可以直接调用系统字体渲染，因此不会出现该问题。

适配Flutter Web的多档字重字体推荐 #

以下字体均原生支持w100-w900全字重，正确配置引入后可在Web端正常生效：

• Inter：当前跨端应用最常用的无衬线字体，西文和中文显示效果均优于Roboto，对小字号的渲染优化更完善，生态适配度高。
• Open Sans：Google官方推出的通用无衬线字体，全字重覆盖，适合内容阅读类产品使用。
• Noto Sans（思源黑体）：多语言场景首选，全字重版本覆盖几乎所有主流语言字符，无缺字风险，Flutter官方生态对其适配完整。

额外注意 #

无论使用哪款字体，都需要完成两个配置保证字重生效：

1. 在pubspec.yaml中为每个用到的字重单独声明对应的字体文件路径
2. 在Web端入口index.html中预加载所有用到的字重文件，避免浏览器自动 fallback 到默认字重

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