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

数字显示不等宽

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

真机预览你发现

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

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

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

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

或者这样

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

css 复制代码
font-family: Helvetica Neue;

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

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

相关推荐
BestHeaker1 小时前
跨企业接口对接:IQDS / CPK 数据解析与协作避坑指南(五)
java·服务器·前端
青花锁1 小时前
OpenAI Function Calling 完全指南:让大模型安全调用你的业务系统
前端·安全·functioncalling
俊昭喜喜里1 小时前
C#中的func<>
java·前端·c#
BillKu2 小时前
vue3 字符串排序 localeCompare,确保排序为 “B01“, “B10“, “B2“
前端·javascript·vue.js
一鸣AI编程2 小时前
功能用例接入 TestStar AI UI:一份可执行的接入清单
前端
晴天162 小时前
打造自己的 npm 包实战指南
前端·npm·node.js
然我2 小时前
从 Service 到生命周期:Agent Runtime 的插件内核
前端·javascript·agent
Moriarty1236662 小时前
【前端技巧】实现卡片页面容器全屏
前端·css
mmsx2 小时前
osmdroid 地图实战 02|在线底图接入:从 URL 模板到生产级瓦片源工厂(谷歌 + 天地图双案例)
前端·前端框架
用户307140958482 小时前
零依赖实现「形切形」:我用 6200 行原生 Canvas 写了个网页设计工具
前端·ai编程·canvas