微信小程序数字和字母的等宽字体

之前用微信小程序实现了一个汇率计算的功能，参见：

微信汇率计算器小程序，炒美股港股收益换算人民币小工具

但是这里有个界面的体验问题，就是数字的默认字体是非等宽字体，看起来非常别扭。 右侧的数字在垂直方向，没有对齐，看起来让人浑身难受。

查了一下微信小程序是支持设置字体的，所以，将右侧数字改成等宽字体即可。

font-family: "Courier New", Consolas, Menlo, "Roboto Mono", "Droid Sans Mono", monospace;

跨平台兼容性

一开始是从网上找了一段代码，但是实际测试在 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 聊聊， 查看更多联系方式