React Native：自定义字体在Android和iOS上的呈现方式不同 [英] React Native: Custom font renders differently on Android and iOS

问题描述

在下面的图片中，我检查了左侧的Android和右侧的iOS上呈现的相同的文本组件。看来，iOS呈现在文字容器顶部的字体。

我为Android和iOS使用相同的TTF字体文件。 （我找到了一个在线参考，我在这里使用

In the picture below I have inspected the same Text-component as rendered on Android on the left and iOS on the right. It seems that iOS renders the font in top of the Text-container.

I'm using the same TTF font-file for both Android and iOS. (I found an online reference to the font I'm using here.)

Any ideas how to make the font render the same for both Android and iOS?

Just to be clear, the difference is not caused by any styling (margin, font size, etc.). It's exactly the same.

解决方案

I found a fix but it doesn't feel right. I think you should find another font that renders the same on each device.

You can play around with the lineHeight, padding and margin to get the same vertical alignment for your text components :

Ios:

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

这篇关于React Native：自定义字体在Android和iOS上的呈现方式不同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！