2020-12-01发表Tech / FrontEnd3 分钟读完 (大约502个字) 次访问

解决微信小程序在 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>

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;
}