同一页面在部分安卓机型上字重和字宽明显不同,排版错位。第一次遇到会往复杂处想,其实漏掉的多是个小前提。
font-family: -apple-system, 'PingFang SC', 'Noto Sans CJK SC', 'Microsoft YaHei', sans-serif;
系统缺少指定字体,回退到了差异较大的默认字体。这一点先确认清楚,后面就不用反复试。
「安卓字体回退」相关的验证我通常做两遍,改完一次、隔天再看一次,确认不是临时生效。把复现步骤压到三条以内,交给同事也能跑出来,才算真的定位清楚。
改动写完就同步给同事,下一个人踩同一个坑,成本还是你的。验证用真实数据走一遍,测试数据太干净,边界情况根本碰不到。
能分两步做的操作就别合成一步,中间看一眼返回值,出问题好判断。报错里带路径的,先去看那个路径在不在、权限对不对。
同一份配置存在多处的,先确认改的是被加载的那一份。
具体做法是,声明完整的回退链;优先使用系统字体;关键标题用图片或固定宽度兜底。
改完照着核一遍,主流机型显示接近,排版无明显错位。