React Native中Windows与macOS的Inter字体渲染差异求助

问题原因 #

• 系统字体映射机制差异：macOS的字体管理系统会自动将同家族的不同粗细字体（如Inter-Regular、Inter-SemiBold）归为一个Inter字体家族，因此通过fontFamily: 'Inter'搭配fontWeight就能匹配到对应变体。但Windows环境下的Android模拟器（或React Native对Windows平台的字体解析逻辑）没有自动关联这些变体，必须指定带后缀的完整字体名（如Inter-Bold）才能识别。
• 精确变体优先级高于fontWeight：当明确指定了带后缀的字体变体后，React Native会直接加载对应的字体文件，忽略fontWeight属性——因为此时你已经指定了具体的字体实例，而不是依赖家族+粗细的匹配逻辑。

可行解决办法 #

1. 统一字体家族配置（推荐） #

在react-native.config.js中手动配置字体家族与对应粗细的映射，让React Native在所有平台上都能通过fontFamily: 'Inter' + fontWeight的方式正确匹配字体：

module.exports = {
  assets: ['./assets/fonts/'],
  fonts: [
    {
      family: 'Inter',
      fonts: [
        { src: './assets/fonts/Inter-Regular.ttf', weight: '400' },
        { src: './assets/fonts/Inter-Medium.ttf', weight: '500' },
        { src: './assets/fonts/Inter-SemiBold.ttf', weight: '600' },
        { src: './assets/fonts/Inter-Bold.ttf', weight: '700' }
        // 按需添加其他粗细变体
      ]
    }
  ]
};

配置完成后，重新执行react-native-asset命令，确保配置同步到iOS和Android项目中。

2. 封装通用Text组件 #

团队统一使用自定义的Text组件，避免手动编写字体样式时出现差异：

import React from 'react';
import { Text, StyleSheet } from 'react-native';

const InterText = ({ style, children, ...props }) => {
  return (
    <Text
      style={[styles.baseText, style]}
      {...props}
    >
      {children}
    </Text>
  );
};

const styles = StyleSheet.create({
  baseText: {
    fontFamily: 'Inter'
  }
});

export default InterText;

后续所有文本都使用InterText组件，只需通过fontWeight控制粗细即可，无需关心平台差异。

3. 验证字体安装与缓存清理 #

• 在Windows环境下，重启Android模拟器并重新安装APP，避免字体缓存导致的识别问题；
• 检查assets/fonts目录下的字体文件名是否规范（无空格、特殊字符），确保文件名与配置中的src路径完全匹配。

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