React Native:Android和iOS上的自定义字体呈现方式不同

Question

在下面的图片中,我检查了与左侧Android和iOS右侧渲染相同的Text-component.似乎iOS将字体呈现在Text-container的顶部.

我正在为Android和iOS使用相同的TTF字体文件.(我在网上找到了我在这里使用的字体.)

任何想法如何使Android和iOS的字体渲染相同？

需要明确的是,差异不是由任何样式(边距,字体大小等)引起的.它完全一样.

Answer 1

问题是与lineGap和ascender .ttf字体文件的参数。使用ftxdumperfuser工具修复它们。检查https://medium.com/@martin_adamko/consistent-font-line-height-rendering-42068cc2957d

Answer 2

我找到了修复但感觉不对劲.我认为你应该找到另一种在每台设备上呈现相同的字体.

您可以使用lineHeight,padding并margin为文本组件获得相同的垂直对齐:

iOS装置:

instructions: {
    fontFamily: 'Metric-Regular',
    fontSize: 50,
    lineHeight: 50,
    paddingTop: 25,
    marginBottom: -35,
    marginTop: 35
  }