React Native中如何用字体族名而非文件名使用自定义字体？

核心问题原因 #

你当前只能通过文件名调用字体，是因为系统或框架未识别到两个字体属于同一个字体族——要么是字体文件本身的元数据（族名、字重）不匹配，要么是没有正确配置字体族映射规则。

解决步骤 #

1. 确认字体文件元数据（关键前提） #

先检查字体文件的内部属性，确保两个字体的字体族名完全一致，且字重对应正确：

• Mac：用「字体册」打开字体，查看「字体信息」里的「家族」和「粗细」，确保Regular的字重为400（常规），Bold为700（粗体），家族名均为「X Sans」。
• Windows：右键字体文件→「属性」→「详细信息」，查看「字体家族」和「字重」字段。
• 如果元数据不符，用Font Forge等工具修改字体的族名和字重属性，保存后替换原文件。

2. 分平台配置实现 #

情况一：Web项目（React/Vue等）

在全局CSS文件中用@font-face声明字体族，将不同字重的文件映射到同一个族名：

@font-face {
  font-family: 'X Sans';
  src: url('./assets/fonts/XSansRegular.ttf') format('truetype');
  font-weight: 400; /* 对应常规字重 */
  font-style: normal;
}

@font-face {
  font-family: 'X Sans';
  src: url('./assets/fonts/XSansBold.ttf') format('truetype');
  font-weight: 700; /* 对应粗体字重 */
  font-style: normal;
}

配置完成后即可按需求调用：

// 常规文本
<div style={{ fontFamily: "X Sans", fontWeight: 400 }}>Hello World</div>
// 粗体文本
<div style={{ fontFamily: "X Sans", fontWeight: 'bold' }}>Hello World</div>

情况二：React Native项目

1. 配置资源路径：在项目根目录创建react-native.config.js，指定字体文件夹路径：

module.exports = {
  assets: ['./assets/fonts/'], // 替换为你的字体实际存放路径
};

2. 链接字体资源：运行命令完成自动链接：

npx react-native link

3. 验证配置（自动链接未生效时手动补充）：
   • iOS：确认Info.plist中已添加字体文件名条目；
   • Android：确认android/app/src/main/assets/fonts/目录下存在字体文件。
4. 清理缓存（若仍不生效）：

npx react-native start --reset-cache

之后即可按需求调用：

// 常规文本
<Text style={{ fontFamily: "X Sans", fontWeight: 400 }}>Hello World</Text>
// 粗体文本
<Text style={{ fontFamily: "X Sans", fontWeight: 'bold' }}>Hello World</Text>

常见排查点 #

• 文件名大小写：Android系统对文件名大小写敏感，确保代码引用与实际文件名完全一致；
• 缓存问题：Web端清理浏览器缓存，React Native端清理Metro缓存；
• 字体格式：若使用woff/woff2等格式，需在@font-face的format字段中对应修改。

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