React Native添加自定义字体后iOS与Android文本对齐不一致问题求助

问题描述 #

在React Native项目中使用自定义字体后，出现跨平台文本对齐不一致的情况：iOS设备上Text组件内的文本向bounding box顶部偏移，而Android设备上文本正常居中。相关代码及效果如下：

示例代码 #

import { useFonts } from "expo-font";
import * as SplashScreen from "expo-splash-screen";
import React, { useCallback } from "react";
import { Text, View, StyleSheet, Platform } from 'react-native';

SplashScreen.preventAutoHideAsync();

export default function App() {
  const [fontsLoaded, fontError] = useFonts({
    mainReg: require("./assets/fonts/DINNextRoundedLTPro-Regular.otf"),
    mainMed: require("./assets/fonts/DINNextRoundedLTPro-Medium.otf"),
    mainBold: require("./assets/fonts/DINNextRoundedLTPro-Bold.otf"),
  });

  const onLayoutRootView = useCallback(async () => {
    if (fontsLoaded || fontError) {
      await SplashScreen.hideAsync();
    }
  }, [fontsLoaded, fontError]);

  if (!fontsLoaded && !fontError) {
    return null;
  }

  return (
    <View style={styles.container} onLayout={onLayoutRootView}>
      <View style={styles.box}>
        <Text style={styles.text}>TEXT</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
  },
  box: {
    margin: 10,
    height: 60,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "lightblue",
  },
  text: {
    fontFamily: "mainBold",
    fontSize: 44,
    backgroundColor: "red",
  },
});

效果差异 #

• iOS端：文本在红色bounding box内偏上
• Android端：文本在红色bounding box内居中

解决方案 #

1. 针对平台手动调整lineHeight #

iOS和Android对字体行高的计算逻辑存在差异，通过Platform.select为不同平台设置适配的lineHeight，可以快速对齐文本：

const styles = StyleSheet.create({
  // ...其他样式
  text: {
    fontFamily: "mainBold",
    fontSize: 44,
    backgroundColor: "red",
    ...Platform.select({
      ios: {
        lineHeight: 48, // 根据实际测试调整，使文本垂直居中
      },
      android: {
        lineHeight: 44, // 与fontSize一致，保持默认居中
      },
    }),
  },
});

注意：lineHeight的具体数值需要根据字体和字号实际测试调整，确保在不同iOS设备上都能居中。

2. 用内边距微调iOS偏移 #

如果lineHeight调整效果不佳，可以直接给iOS平台的Text组件添加顶部内边距，补偿偏移：

const styles = StyleSheet.create({
  // ...其他样式
  text: {
    fontFamily: "mainBold",
    fontSize: 44,
    backgroundColor: "red",
    ...Platform.select({
      ios: {
        paddingTop: 4, // 按需调整，抵消顶部偏移
      },
    }),
  },
});

3. 修复字体文件的垂直元数据 #

部分自定义字体的内置垂直 metrics（如ascent、descent、lineGap）设置不合理，导致iOS渲染时基线偏移。可以用字体编辑工具（如FontForge、Glyphs）修改字体文件：

• 打开字体文件，找到OS/2表
• 调整Ascent、Descent值，使两者之和接近字体的实际高度（例如Ascent = 字体高度 * 0.8，Descent = 字体高度 * 0.2）
• 将LineGap设置为0，避免额外的行间距影响
• 重新导出字体文件并替换项目中的原文件

这种方法可以从根源解决跨平台对齐问题，无需在代码中添加平台适配样式。

4. 使用includeFontPadding属性（Android端优化） #

Android默认会给Text组件添加额外的内边距，若后续出现对齐问题，可尝试关闭该属性：

text: {
  // ...其他样式
  includeFontPadding: false, // 关闭Android默认字体内边距
},

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