微信小程序真机预览-数字不等宽如何解决

56 阅读1分钟

数字显示不等宽

image.png

你按照设计稿, 把右侧时间设置了同一个字号, 以为就是100%还原了UI设计,还心里小小得意🤔

真机预览你发现

image.png

哎呦我去,我猜你肯定区检查了字体大小,肯定也预览了好几遍,才确认这个情况确实不是字体大小不一样导致的

😂😂😂 其实是因为 01 与其它数字宽度不一致导致的

那解决方法肯定是 设置一个等宽字体 但是那么多等宽字体 到底应该选择那个字体?

选择的不对,就会造成下面的效果

image.png

或者这样

image.png

如果你也出现上述问题,你不妨设置

font-family: Helvetica Neue;

这个试试看,你会得到以下结果

image.png

好了,最后希望大家都不要踩坑,愿所有bug的解决方法 都可以百度到 谢谢