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

数字显示不等宽

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

真机预览你发现

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

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

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

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

或者这样

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

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

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

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

相关推荐
Drift_Dream2 小时前
前端趣味交互:如何精准判断鼠标从哪个方向进入元素?
前端
hqk2 小时前
鸿蒙ArkUI:状态管理、应用结构、路由全解析
android·前端·harmonyos
米思特儿林2 小时前
NuxtImage 配置上传目录配置
前端
Mr_chiu2 小时前
AI加持的交互革新:手把手教你用Vue3打造智能模板输入框
前端
精神状态良好2 小时前
告别聊天式编程:引入 OpenSpec,构建结构化的 AI 开发工作流
前端
WangHappy2 小时前
出海不愁!用Vue3 + Node.js + Stripe实现全球支付
前端·node.js
林希_Rachel_傻希希2 小时前
手写Promise最终版本
前端·javascript·面试
visnix2 小时前
AI大模型-LLM原理剖析到训练微调实战(第二部分:大模型核心原理与Transformer架构)
前端·llm
老妪力虽衰2 小时前
零基础的小白也能通过AI搭建自己的网页应用
前端