Expo Android自定义字体加载问题求助：斜体失效+黑体权重异常

问题1：斜体字体无法正常渲染 #

原因 #

直接使用带Italic后缀的 fontFamily 名称，同时设置fontStyle: "italic"会造成匹配冲突；或者Expo自动推断字体变体时未正确识别斜体属性。

解决步骤 #

1. 修改app.json的字体配置，手动指定字体属性
   将同系列字体归为同一个name，通过weight和style明确区分变体，让Expo能精准匹配：

   "plugins": [
     [
       "expo-font",
       {
         "fonts": [
           {
             "file": "./assets/fonts/Averta-Regular.otf",
             "name": "Averta",
             "weight": "400",
             "style": "normal"
           },
           {
             "file": "./assets/fonts/Averta-RegularItalic.otf",
             "name": "Averta",
             "weight": "400",
             "style": "italic"
           },
           {
             "file": "./assets/fonts/Averta-Semibold.otf",
             "name": "Averta",
             "weight": "600",
             "style": "normal"
           },
           {
             "file": "./assets/fonts/Averta-SemiboldItalic.otf",
             "name": "Averta",
             "weight": "600",
             "style": "italic"
           },
           {
             "file": "./assets/fonts/Averta-Black.otf",
             "name": "Averta",
             "weight": "900",
             "style": "normal"
           },
           {
             "file": "./assets/fonts/Averta-BlackItalic.otf",
             "name": "Averta",
             "weight": "900",
             "style": "italic"
           }
         ]
       }
     ]
   ]
   

2. 调整Text组件的样式写法
   统一使用Averta作为 fontFamily，通过fontWeight和fontStyle指定对应变体：

   <Text
     style={{
       fontFamily: "Averta",
       fontWeight: 600,
       fontSize: 32,
       fontStyle: "italic",
     }}
   >
     Averta Semibold Italic 600
   </Text>
   

问题2：Averta-Black仅在权重设为950时生效 #

原因 #

字体文件内置的权重值可能非标准900，Expo自动映射时无法关联到标准权重值。

解决步骤 #

1. 通过配置手动绑定标准权重
   上面的配置已为Averta-Black指定weight: "900"，使用时直接设置标准权重值即可：

   <Text
     style={{ fontFamily: "Averta", fontWeight: 900, fontSize: 32 }}
   >
     Averta Black 900
   </Text>
   

2. 特殊情况适配
   如果上述配置无效，用字体工具（如Font Book）查看Averta-Black的实际内置权重值（OS/2表的usWeightClass）。若确实为950，可在配置中将weight设为"950"，使用时保持fontWeight: 950即可。

额外排查优化 #

• 清除Expo缓存：执行npx expo start --clear，避免旧缓存干扰。
• 验证字体打包路径：执行npx expo prebuild后，检查android/app/src/main/assets/fonts目录下是否存在所有OTF文件，确保路径配置正确。
• 手动加载字体（可选）：若自动加载仍有问题，在App组件中用useFonts钩子手动加载，更可控：

  import { useFonts } from 'expo-font';
  import { View, Text } from 'react-native';
  
  export default function App() {
    const [fontsLoaded] = useFonts({
      'Averta-400': require('./assets/fonts/Averta-Regular.otf'),
      'Averta-400-italic': require('./assets/fonts/Averta-RegularItalic.otf'),
      'Averta-600': require('./assets/fonts/Averta-Semibold.otf'),
      'Averta-600-italic': require('./assets/fonts/Averta-SemiboldItalic.otf'),
      'Averta-900': require('./assets/fonts/Averta-Black.otf'),
      'Averta-900-italic': require('./assets/fonts/Averta-BlackItalic.otf'),
    });
  
    if (!fontsLoaded) return null;
  
    return (
      <View>
        <Text style={{ fontFamily: 'Averta-900', fontSize: 32 }}>Averta Black 900</Text>
        <Text style={{ fontFamily: 'Averta-600-italic', fontSize: 32 }}>Averta Semibold Italic</Text>
      </View>
    );
  }
  

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