React Native：Android和iOS上的自定義字體呈現方式不同

Question

在下面的圖片中，我檢查了與左側Android和iOS右側渲染相同的Text-component。 似乎iOS將字體呈現在Text-container的頂部。

我正在為Android和iOS使用相同的TTF字體文件。 （我在網上找到了我在這里使用的字體。）

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

需要明確的是，差異不是由任何樣式（邊距，字體大小等）引起的。 它完全一樣。

Answer 1

我找到了修復但感覺不對勁。 我認為你應該找到另一種在每台設備上呈現相同的字體。

您可以使用lineHeight ， padding和margin來獲得文本組件的相同垂直對齊：

iOS裝置：

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

Answer 2

問題在於lineGap和ascender .ttf字體文件參數。 使用ftxdumperfuser工具修復它們。 檢查https://medium.com/@martin_adamko/consistent-font-line-height-rendering-42068cc2957d