React Native Expo自定义字体问题求助：Inter-SemiBold未加载报错

核心原因 #

报错本质是Expo无法识别你指定的字体——要么没通过Font.loadAsync显式加载，要么加载时用的字体名称和实际字体文件的PostScript名称不匹配（这是最容易踩的坑）。

分步解决 #

1. 确认字体文件与项目配置

• 将Inter-SemiBold.ttf（或.otf格式）放在项目的assets/fonts目录下（没有该目录就手动创建）
• 打开app.json，确保assets数组包含字体目录：

  "expo": {
    "assets": ["./assets/fonts/"],
    // 其他配置项...
  }
  

2. 核对字体的实际名称

文件名≠字体实际名称！比如Inter-SemiBold.ttf的PostScript名称可能是Inter-SemiBold或Inter Semi Bold，必须用这个准确名称加载：

• Mac：打开字体文件，在字体册中查看「PostScript名称」
• Windows：右键字体文件→属性→详细信息→「字体名称」或「PostScript名称」

3. 正确编写字体加载代码

用expo-font和AppLoading确保字体加载完成后再渲染页面，避免渲染时字体未就绪：

import React, { useState } from 'react';
import { View, Text } from 'react-native';
import * as Font from 'expo-font';
import AppLoading from 'expo-app-loading';

// 加载自定义字体
const loadFonts = async () => {
  await Font.loadAsync({
    // 键是字体的实际PostScript名称，值是文件路径
    'Inter-SemiBold': require('./assets/fonts/Inter-SemiBold.ttf'),
  });
};

export default function App() {
  const [fontsLoaded, setFontsLoaded] = useState(false);

  if (!fontsLoaded) {
    return (
      <AppLoading
        startAsync={loadFonts}
        onFinish={() => setFontsLoaded(true)}
        onError={(err) => console.error(err)}
      />
    );
  }

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text style={{ fontFamily: 'Inter-SemiBold', fontSize: 28 }}>测试Inter半粗体</Text>
    </View>
  );
}

4. 常见排查点

• 路径检查：require中的文件路径要和实际文件位置完全匹配，区分大小写
• 文件完整性：更换官方下载的Inter字体文件，排除文件损坏问题
• 依赖安装：确保已安装expo-font，执行npm install expo-font或yarn add expo-font
• 清除缓存：运行expo r -c清除Expo缓存，避免旧缓存干扰

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