在Web端输入密码时，我们通常会看到一个个小圆点作为掩码，用以隐藏用户输入的内容。如下图这样：

我发现，为了实现这些圆点的特定大小，往往需要进行切图，这种方法大大增加了开发的工作量。因此，我开始探索是否可以使用字体中的特殊字符来代替，以此来节省开发时间。

在网上搜索后，我发现有三种大小的圆点特殊符号，·•●从左到右依次称作小圆、中圆、大圆，小圆通常对应中文输入法中的“·” ；而中圆和大圆的大小则不那么固定，它们会随着不同的字体和字重变化。在Web端，由于Mac和Windows系统使用的字体不同，我们需要考虑这些差异。

相同字号，在苹方字体和Mcrosoft Yahei UI字体下，三个圆点的大小表现如下图

通过对比不同字体下的圆点大小，我发现在苹方字体下，中圆和大圆相对较大（大圆的差异更为显著），而字重对圆点大小没有影响。相反，在Microsoft Yahei UI字体下，中圆和大圆显得较小，特别是在加粗样式下，小圆的大小几乎与中圆相同。这解释了为什么在不同设备和字体下，我们观察到的密码掩码大小会有差异。

在设计中，我选择了16px的字号。实验表明，在Microsoft Yahei UI字体下，中圆略显小，而大圆则恰到好处；而在苹方字体下，大圆视觉上过大，中圆又稍显小。这表明，要在两个主要的操作系统上实现一致的设计效果，最好是使用同一种字体。然而，仅仅为了一个圆点就引入新的字体资源似乎并不经济。

幸运的是，我发现两个系统有一些共通的英文字体，共有12种：Arial、Comic Sans MS、Courier New、Georgia、Impact、Lucida Console、Palatino Linotype / Palatino、Tahoma、Times New Roman、Trebuchet MS、Verdana和Symbol。经过一系列的对比测试，我最终选择了广泛使用的Arial字体。（见下图）

优化后的设计效果如下图所示。请注意，只有在隐藏密码时才使用了Arial字体，而在显示密码时，仍然使用了苹方或Microsoft Yahei UI字体。这样的设计不会增加开发难度。如果输入框中的内容不包含汉字，完全采用Arial字体也是可行的；但我认为，苹方和Microsoft Yahei UI在显示效果上优于Arial，因此即使不包含中文，我还是选择了不同的字体。

此外，如果输入的文字不加粗，视觉上倾向于使用较小的圆点，那么可以选择中圆，这是目前主流网站的做法。中圆在三种字体下的表现各有不同，见下图

Mac系统中的苹方字体表现最佳，而Arial字体下的则相对较弱。此时，应注意，更小的圆点应配以更大的字间距，以降低视觉疲劳，特别是在没有显示密码功能时。

最后，值得一提的是，在移动端，掩码设计通常更大，这可能是因为在移动端自定义大小的实现相对容易。在过往的项目中，我通常将圆点进行切图，开发过程也相对顺畅，这表明在移动端实现自定义大小的掩码设计应该会更为便捷。

（WX关注 “小桔设计”，解锁）

Powered by Froala Editor