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

数字显示不等宽

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

真机预览你发现

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

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

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

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

或者这样

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

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

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

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

相关推荐
球球pick小樱花4 分钟前
游戏官网前端工具库:海内外案例解析
前端·javascript·css
用户605723748730811 分钟前
AI 编码助手的规范驱动开发 - OpenSpec 初探
前端·后端·程序员
狗胜14 分钟前
AI观察日记 2026-03-02|CLAUDE、TYPE、APPFUNCTIONS:掘金热门里的下一步信号
前端
喝水的长颈鹿16 分钟前
【大白话前端 02】网页从解析到绘制的全流程
前端·javascript
明君8799717 分钟前
Flutter 实现 AI 聊天页面 —— 记一次 Markdown 数学公式显示的踩坑之旅
前端·flutter
用户145369814587819 分钟前
VersionCheck.js - 让前端版本更新变得简单优雅
前端·javascript
米饭同学i20 分钟前
微信小程序实现随机撒花效果
前端
Arthur147261228654720 分钟前
模块化和组件化的区别
前端
codingWhat23 分钟前
整理「祖传」代码,就是在开发脚手架?
前端·javascript·node.js
臣妾没空33 分钟前
里程碑5:完成框架npm包抽象封装并发布
前端·npm