React Native Android 中字体未垂直居中

Question

当我取消设置 font-family 属性时，文本居中，所以这一定是我使用的字体有问题，即 Google 的 Poppins。

我在使用自定义字体时发现了类似的问题

• React原生iOS中的垂直居中自定义字体
• 自定义字体垂直对齐的偏移

有趣的是，这些问题出在 iOS 上，而不是 Android 上。我想我通过以下步骤破解了它：

1. 安装 Xcode 14 的字体工具
2. 运行

   ftxdumperfuser -t OS/2 -A d Poppins-Medium.ttf

   来生成

   Poppins-Medium.OS_2.xml

3. 修改 xml 中的

   typoAscender

   和

   typoDescender

   属性
4. 使用

   ftxdumperfuser -t OS/2 -A f Poppins-Medium.ttf

将 xml 更改应用到字体

虽然我后来发现这只能解决使用 Android API 级别 33 的 Android 手机的垂直对齐问题。使用 API 级别 32 的 Android 手机<= are completely unaffected by this change, and I cannot find a fix for this or any change regarding fonts in the android api release notes. I also have doubts that the solution I have tried is the correct one, given that the font I'm using is one of Google's.

Android API 级别 33，带有我修补的 Poppins 字体（居中）：

Android API 级别 32，带有我修补的 Poppins 字体（不居中）：

Android API 级别 32，带系统字体（居中）：

我正在运行一个

yarn create expo-app

项目，在

/assets/fonts/

下安装 Poppins 字体以及以下 App.js 文件：

import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View } from "react-native";

import { useFonts } from "expo-font";

export default function App() {
  const [fontsLoaded] = useFonts({
    "Poppins-Medium": require("./assets/fonts/Poppins-Medium.ttf"),
  });

  if (!fontsLoaded) {
    return null;
  }

  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <View style={{ borderWidth: 1, borderRadius: 500 }}>
        <Text style={{ fontFamily: "Poppins-Medium" }}>Hello</Text>
      </View>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

我在这里缺少什么让 Poppins 字体垂直对齐 Android API 级别 32<= ?

Answer 1

我通过互联网搜索并找到了可能的答案。它对我来说非常有效

只需在 style.xml (/android/app/src/main/res/values/styles.xml) 文件中添加

<item name="android:includeFontPadding">false</item>

并重建应用程序。

了解更多信息https://github.com/google/fonts/issues/3457