解决微信小程序在 iPhone iOS 上 text 宽度只有一半导致的不居中等种种问题

现象

当小程序中使用第三方字体时，在 iPhone 11 和 iPhone 12 机型下

• 中文字正常
• 英文字和数字，居中和右对齐异常

这个问题只能在几个特定的机型下出现，不用第三方字体也没有这个问题，安卓机型和开发者工具也重现不了，甚至 iPhone 12 mini 用同一版本也不能重现。

微信版本：7.0.18
小程序基础库：2.14.0
iOS：14.2

这未免也太奇怪了。

代码

代码片段地址：https://developers.weixin.qq.com/s/wgOVEgmQ7Cmz

wxml

<view class="page" wx-if="{{ ready }}">
  <view class="text-left">左对齐文本</view>
  <view class="text-center">居中文本</view>
  <view class="text-right">右对齐文本</view>
  <view class="text-left">Left</view>
  <view class="text-center">Center</view>
  <view class="text-right">Right</view>
  <view class="text-left">123</view>
  <view class="text-center">456</view>
  <view class="text-right">789</view>
  <view class="center-line"></view>
</view>

js

Page({
  data: {
    ready: false
  },
  onLoad () {
    wx.loadFontFace({
      global: true,
      family: 'FZZhunYuan-M02S',
      source: 'url("http://localhost:9000/FZZhunYuan.ttf")',
      complete: (res) => {
        console.log('loading font status: ' + res.status)
        this.setData({ ready: true })
      }
    })
  }
})

wxss

.page {
  display: flex;
  flex-direction: column;
  font-family: 'FZZhunYuan-M02S';
}
.center-line {
  position: absolute;
  left: 50vw;
  width: 1px;
  height: 100vh;
  background-color: #ff0000;
}
.text-left,
.text-center,
.text-right {
  width: 80%;
  display: flex;
  background-color: #cccccc;
  margin: 20rpx auto;
  font-size: 50rpx;
}
.text-left {
  justify-content: flex-start;
}
.text-center {
  justify-content: center;
}
.text-right {
  justify-content: flex-end;
}

分析

使用微信开发者工具真机调试功能，发现 text 的宽度只有正常的一半宽度，尝试设置 text 的宽度，因为 text 属于 inline 元素，所以没有效果……

于是乎，想到既然中文字正常，那我们只要在英文字中加入中文字符，是不是能解决问题呢？

解决办法

如果想让文字居中，就在文字左右各加一个全角空格“　”
如果想让文字右对齐，就在文字右边加一个全角空格“　”

其实就是，只要让文本不全是英文和数字，就不会出现问题。

(⊙﹏⊙)……说是解决办法，其实是一个 workaround，等着官方修复吧……

社区相应的 bug：https://developers.weixin.qq.com/community/develop/doc/0006cc3bd7056063605b97a2353c00