React Native：自定义字体在 Android 和 iOS 上的呈现方式不同答案

【问题标题】：React Native: Custom font renders differently on Android and iOSReact Native：自定义字体在 Android 和 iOS 上的呈现方式不同
【发布时间】：2017-05-25 00:45:57
【问题描述】：

在下图中，我检查了左侧的 Android 和右侧的 iOS 上呈现的相同文本组件。似乎 iOS 将字体呈现在 Text-container 的顶部。

我对 Android 和 iOS 使用相同的 TTF 字体文件。（我在网上找到了我正在使用的字体here。）

任何想法如何使字体在 Android 和 iOS 上呈现相同？

需要明确的是，差异不是由任何样式（边距、字体大小等）引起的。完全一样。

【问题讨论】：

标签： android ios fonts react-native

【解决方案1】：

我找到了解决方法，但感觉不对。我认为您应该找到另一种在每个设备上呈现相同的字体。

您可以使用lineHeight、padding 和margin 来为您的文本组件获得相同的垂直对齐方式：

IOS：

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

【讨论】：

谢谢，这真的帮助我找到了解决方案！因为我需要支持多行文本，所以我不能像你一样设置高度。但是，当我在 Text 组件的顶部添加一个填充并在底部添加一个负边距时，它似乎起作用了，这两个值都与字体大小相关。
@henkimon 谢谢，我很高兴能帮上忙。如您所见，我根据您的评论改进了我的答案。如果你能接受，那对我来说就意味着整个世界。

【解决方案2】：

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

【讨论】：