之前用微信小程序实现了一个汇率计算的功能，参见：
但是这里有个界面的体验问题，就是数字的默认字体是非等宽字体，看起来非常别扭。
右侧的数字在垂直方向，没有对齐，看起来让人浑身难受。
查了一下微信小程序是支持设置字体的，所以，将右侧数字改成等宽字体即可。
font-family: "Courier New", Consolas, Menlo, "Roboto Mono", "Droid Sans Mono", monospace;
简单一点，直接：
font-family: monospace;
唯一的缺点是，字号会变小，最好指定 font size。
跨平台兼容性
一开始是从网上找了一段代码，但是实际测试在 Android 上还是显示为非等宽，不得以还是让 DeepSeek 来吧。
果然，上面的代码更靠谱一点。至少在 Windows 模拟器和 Android 上是没有问题的。
不同平台的默认等宽字体如下：
- Windows：Consolas（Vista+）、Courier New
- macOS/iOS：Menlo、Courier New、SF Mono（部分场景）
- Android：Roboto Mono（新机型）、Droid Sans Mono（旧机型）
- 通用回退：monospace（系统默认等宽字体）
验证方法
输入 11111 这个数字来测试。
题外话，最近用 claude 3.7 写了几个前端界面，甚至可以说是设计稿加界面，例如一个打砖块的游戏和一个工控机的操作界面，还有一个仿 Twitter 的消息界面，非常惊艳。我宣布，claude 3.7 吊打我见过的所有前端开发，无一例外🤦♂️ 无论是审美，还是功能细节，claude 都遥遥领先(^з^)-☆
关于作者 🌱
我是来自山东烟台的一名开发者，有感兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊，或者关注我的个人公众号“大象工具”， 查看更多联系方式