比特派账户余额是什么字体？钱包里金额数字到底用的哪款字

用比特派钱包好几年了, 最近帮朋友做UI参考, 他盯着手机屏幕问余额那块数字到底用的什么字体。翻了一圈没找到官方说明, 只能从界面截图和实际体验来推断, 把我看到的写下来。

比特派余额是什么字体

请把截图放大到200%的地方去仔细地看一看, 比特派账户余额的数字是没有使用那种特殊的品牌字体的。在iOS端的话, 大概率就是用系统里自带的SF Pro字体, 在Android端的话就是用Roboto字体。

就是它紧紧地跟着系统走的意思, 没有把多余的字体文件打包进去。你去看看它的App安装包的整体体积吧, 也就才十几兆的大小而已, 那么大的地方根本就没法塞进去好几套自定义的字体文件的。

有一个很容易被忽视的细节, 那就是小数点后头的那一串数字, 它们的宽度都是统一的。

这一点就说明了它已经开启了等宽数字的功能, 也叫做tabular figures特性, 而不是说换了一款新的字体, 其实是同一款字体里面的一个开关。有很多的设计师在看界面的时候只管关注什么颜色和字号, 这种细节就给它漏掉了。

比特派余额数字等宽吗

你一定要使用等宽字体。你就去盯着那个"0.00"和"8.88"这两个东西, 让你把它们放在一起对比着看。这样数字之间就不会出现左右来回跳动的那种情况。你钱包里面的金额是实时进行刷新的。

金额从0变成3, 然后再变成7。字体的宽度始终保持不变。只有这个样子看着才会有一种非常稳定的感觉。如果你不用等宽字体的话, 那些数字就会发生抖动的情况。这样的使用体验会让人觉得非常闹心。

如果真要去做那个复刻工作, 在CSS样式代码里面, 专门加入一行font-variant-numeric: tabular-nums这个设置项, 就已经是完全足够应对的了。

对于移动端设备里的iOS系统来说, 直接使用其内置的系统字体所配备的等宽变体形式即可。而对于Android设备, 则使用Roboto字体所提供的等宽版本。完全不需要去专门下载额外的字体文件,这样就直接节省了大概几百KB的文件包体积大小问题。

说白了一点其实就是系统在默认配置下面给字体增加了一个等宽显示的这个特性, 实际上并没有大家想得那么神秘和复杂, 我们不要把过多的时间消耗在对字体样式的选择和修改上面, 而是应该把主要精力转移投入到对交互逻辑的梳理以及页面加载动效的视觉表现上去, 这样做带来的实际体验和投入产出比会更高一些。