数字文本中含有数字1的文本在ios上的表现和安卓不一致,数字未对齐,详见截图
发布于 4 年前 作者 yuanjing 3660 次浏览 来自 问答
  • 当前 Bug 的表现(可附上截图)

设备:iPhone Xs

问题:数字文本中含有数字1的文本在ios上的表现和安卓不一致,数字未对齐。通过硬编码,对文本数字中含有数字1的文本添加类名,给其数字增加间距,也不行。

  • 预期表现

以下为安卓机上表现:

安卓表现正常

  • 复现路径
  • 提供一个最简复现 Demo
3 回复

这个是正常现象。对于大部分字体,即使 font-size 相同,各个的字符占据的宽度是不太一样的。我们在不同的手机上使用这个机型的默认字体,所以如果你不指定 font-family ,就会有这种问题。

如果需要各个的字符占据的宽度一致,请使用等宽字体( monospace )。

把字体设为 -apple-system 并且在 font-feature-settings 添加 “tnum” 规则

page {
    font-family: -apple-system, Helvetica, sans-serif;
    font-feature-settings: "tnum" 1;
}
回到顶部