最近开发小软件的时候, 发现两个有意思的问题:

  1. 如何让时间表示形式 aa:bb 中的 : 垂直居中显示
  2. 在一个300px的容器中显示10个字符, 如何设置字体大小, 使得字体正好填满容器空间

连字

针对第一个问题, 很容想到的就是使用自定义元素绘制两个垂直居中的点, 但是略显麻烦, 且不能利用字体的特性(大小/颜色/行高等). 于是还是想通过字符实现, 因为在 unicode 中有大量字符, 一般的标点字符都有多种变体以适用于不同场景, 总有一款能适合我的吧.

查阅百科发现, 冒号的确有十多种变体, 如宽度不一样的, 形状奇特的, 位置有偏移的, 等等. 可没有一个符号满足我的这个简单需求. 在尝试中, 偶然发现, 冒号两边是数字时, 冒号自然就垂直居中了, 如下图所示

time-colon

(如果你想自己验证该现象, 可以在最新的macOS 上安装最新版钉钉, 在输入框中输入上述文字即可)

一切就豁然开朗了, 这就是连字 现象, 不禁觉得苹果用户体验做的很好, 极大的缓解了强迫症症状.

连字就是将两个及以上字符合成一个字符, 连字需要在下述两种条件均满足时才会显示出效果.

  • 需要字体支持(至于哪些字符支持连字, 由字体自己控制)
  • 需要文字渲染引擎支持连字, 操作系统均已支持连字, 但是部分软件可能会将连字功能关闭. 前端Web开发中可以使用css属性 font-variant-ligatures 控制是否启用连字.

编程字体

连字的应用其实非常普遍, 对程序员来说影响最大的就是一些编程专用字体了. 所谓编程字体, 就是:

  • 将一些不容易区分的字符(如0oOLIil等)显著区分开
  • 借助连字特性, 将一些常用的符号组合(如 =>, !=, ==, ===) 合成一个符号提供可读性
  • 适当调整不同字符之间的间距, 使其容易阅读识别

fira code

编程字体推荐: ProgrammingFonts
代码编辑器(IDE)开启连字功能的方法: How to enable ligatures

字体大小

再回到第二个问题, 其实问题的本质是: 「当我们设置 字体大小 时, 设置的是字体的宽还是高?」

经过一番试验测量(使用了PixelSnap测量, 该软件为付费用软件, 但已经包含在了SetApp中)后发现:

  1. 大部分西文字符在不同字体下, 字体宽度总小于 字体大小 的值(大约为 字体大小 的 0.6 ~ 0.8), 但是高度与 字体大小 一致
  2. 中文字符(包括标点符号,即全角符号)在不同字体基本上宽高均与 字体大小 一致, 此谓 「字正腔圆」

通过查阅资料字体解剖得知, 字体大小 所指的就是字体高度, 字体宽度是随字符及字体而变的

字体类型

在显示时间时, 秒数时刻在变, 不经过特殊设置, 会明显的发现整个时间字符宽度一直在不停变化, 对强迫症来说是一种煎熬. 这时候, 把字体换成一种「等宽字体」即可解决问题.

一般设置字体时, 可以设置为某一种特定字体, 比如 Helvetica、微软雅黑, 也可以是某一种字体类型(一种字体类型会包含多种字体, 若指定为字体类型, 则由系统底层自行决定使用哪一个字体渲染). 一般字体类型有:

  1. 衬线体 serif: 中文字体中也称「白体」, 此类字体会有很多点缀修饰, 如 宋体、楷体. 衬线体由于多了边角修饰, 会相对美观, 但是也多了信息噪音, 容易使用户产生视觉疲劳, 一般建议仅针对需要着重强调的文字(比如 文章标题)采用该类型的字体. 同时由于衬线体的修饰元素不规则, 会产生锯齿现象, 实际使用时应结合反锯齿技术才能达到较好的显示效果.
  2. 无衬线体 sans-serif: 中文字体中也称「黑体」, 与衬线体相对, 该类字体没有多余的修饰, 如 微软雅黑 等. 无衬线体 适合屏幕中大量使用, 不会导致用户产生视觉疲劳问题.
  3. 等宽字体 monospace: 此类字体每个字符宽度一致. 由于东亚的字体的字符本身基本都是等宽的, 所以一般在说等宽字体时, 都是指西文字体. 该字体的可读性较好, 一般在 代码编辑器 及 Terminal 中使用比较普遍.