[小程序]设置view中字体水平垂直方向都居中

问题

设置了text-align 和 line-height属性 实现水平和垂直方向居中,在iOS端显示正常居中。但在Android机型特别是小米手机上仅水平居中,垂直方向上会向上偏移。

解决方案

网上大佬表示:

  1. 单纯使用CSS是无法解决的:
    即使解决了也是一种通过微调来实现的hack方法,因为文字在content-area内部渲染的时候已经偏移了,而css的居中方案都是控制的整个content-area的居中
    简单说就是:文字在渲染时本身就是偏移的。
    的确,自己尝试了
    ① view中文字包裹text标签并设置为block属性,用于设置居中布局 —— 不行
    ② 对view使用flex布局,设置内部元素水平垂直方向都居中 —— 但无效果
    (补充: flex 可用于内部多块元素之间的布局设置,属于外部设置。对于块内文字的布局设置这类内部布局,使用flex并无效果,即使设置文字的为block属性)

  1. 大佬认为导致这个问题的本质原因可能是Android在排版计算的时候参考了primyfont字体的相关属性(即HHead Ascent、HHead Descent等),而primyfont的查找是看font-family里哪个字体在fonts.xml里第一个匹配上,而原生Android下中文字体是没有family name的,导致匹配上的始终不是中文字体,所以解决这个问题就要在font-family里显式申明中文,或者通过什么方法保证所有字符都fallback到中文字体。
    简单说就是:Android下 对文字的排版方面没有中文字体,导致渲染出来的不是中文字体。
  2. 根据这2个思路,给出2个解决方案:
    ① 针对Android 7.0+设备:上设置 lang 属性:,同时font-family不指定英文,如 font-family: sans-serif 。这个方法是利用了浏览器的字体fallback机制,让英文也使用中文字体来展示,blink早期的内核在fallback机制上存在问题,Android 7.0+才能ok,早期的内核下会导致英文fallback到Noto Sans Myanmar,这个字体非常丑。
    ② 针对MIUI 8.0+设备:设置 font-family: miui 。这个方案就是显式申明中文的方案,MIUI在8.0+上内置了小米兰亭,同时在fonts.xml里给这个字体指定了family name:miui,所以我们可以直接设置。

通过上述,自己尝试了下

  1. HTML部分自己设置是

你可能感兴趣的:([小程序]设置view中字体水平垂直方向都居中)