React Native Android中Poppins字体垂直不居中(API≤32)求助
React Native Android 中 Poppins 字体垂直居中问题(API 32及以下设备)
在React Native Android项目中,我遇到了Poppins字体无法垂直居中的问题:取消font-family属性后文本可正常居中,因此问题源于Google的Poppins字体本身。
我找到了一些自定义字体相关的类似问题,但均针对iOS而非Android:
- React Native iOS自定义字体垂直居中问题
- 自定义字体垂直对齐偏移问题
我曾尝试以下步骤修复:
- 安装Xcode 14的Font Tools工具
- 执行命令
ftxdumperfuser -t OS/2 -A d Poppins-Medium.ttf生成Poppins-Medium.OS_2.xml文件 - 修改该XML文件中的
typoAscender和typoDescender属性 - 执行命令
ftxdumperfuser -t OS/2 -A f Poppins-Medium.ttf应用修改
但该方案仅对Android API level 33有效,API level 32及以下设备完全不受影响,且我在Android API发布说明中未找到相关字体变更记录。由于使用的是Google官方字体,我怀疑该方案并非最优解。
相关截图:
- Android API level 33使用修补后的Poppins字体(已居中):

- Android API level 32使用修补后的Poppins字体(未居中):

- Android API level 32使用系统字体(已居中):

我的项目通过yarn create expo-app创建,Poppins字体放置在/assets/fonts/目录下,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", }, });
请问如何解决Android API level 32及以下设备中Poppins字体的垂直对齐问题?
内容的提问来源于stack exchange,提问作者Squiffy
相关产品推荐
相关产品推荐

