React Native中如何正确使用Google OpenSans可变字体

你引入的OpenSans-VariableFont_wdth,wght.ttf是单文件可变字体，所有字重、字宽样式都整合在这一个文件内，不存在OpenSans-Bold这个独立字体族，直接指定该名称必然触发无法识别的报错。之前设置OpenSans-Regular能生效只是系统对可变字体默认字重的兼容映射，并非真的存在这个带后缀的字体条目。

• 先确认字体的实际注册族名
  不要自行臆测字体名，先确认项目可识别的正式字体名称：
  • iOS端可以打印项目已加载的所有字体列表，找到OpenSans对应的统一族名，默认就是OpenSans
  • Android端直接使用去掉文件后缀的基础名OpenSans即可
    注意不要给fontFamily加-Bold、-Regular这类后缀，可变字体只有一个统一的族名。
• 通过fontWeight属性控制字重，不需要切换fontFamily
  可变字体的所有字重效果都基于同一个字体族，通过字重参数切换即可，粗体样式写法如下：

  {
    fontSize: 18,
    fontFamily: "OpenSans", // 固定填写可变字体的统一族名
    fontWeight: "700" // 400对应常规体，700对应粗体，可变字体支持100-900区间的任意字重值
  }
  

• 兼容注意事项

  React Native 0.66及以上版本才完整支持可变字体的动态字重切换。如果你的项目版本低于0.66，可变字体无法动态调整字重，需要下载Google Fonts提供的拆分静态字体包（也就是独立的OpenSans-Regular.ttf、OpenSans-Bold.ttf等单字重文件），分别注册后再通过不同fontFamily调用对应样式。
  这个可变字体自带的字宽（wdth）调整能力，React Native默认样式接口暂不支持直接配置，普通业务场景只用到字重的话，按上面的写法配置fontWeight就可以正常使用。

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