是否有人在看视频、做视频时遇到下图上边这样的问题？

如果你感觉到奇怪，是否希望改成上图下边的形式？

那么概括下这几个月来的发现。

数字

实际上数字和茴香豆差不多，有4种写法（没算上斜杠〇）

[CSS Fonts Module Level 3 # 6.7. Numerical formatting: the font-variant-numeric property](https://www.w3.org/TR/css-fonts-3/#font-variant-numeric-prop)（英文）

[OT字体功能 # 数字样式 | 微软文档](https://docs.microsoft.com/zh-cn/dotnet/framework/wpf/advanced/opentype-font-features#numerical-styles)（微软机翻）

数字有两种样式<numeric-figure-values>：李宁（lnum）和 旧式（onum）写法肯定有差异，
有两种间距<numeric-spacing-values>：比例（pnum）和 表格（tnum）写法可能有差异，
2样式和2间距可以乘出4种写法；
还有一种特殊写法：斜杠零（zero）

上文括号里的缩写是OpenType（以下简称OT）的feature tags。一些优良的OT字体会同时包含4\5种数字但默认只显示1种，需要手动在软件OT特性开关里调用其他未映射的几种。
[Feature tags - Typography | 微软文档](https://docs.microsoft.com/zh-cn/typography/opentype/spec/featuretags)（目前是英文）功能标签？特征类型？我不懂翻译。

lnum／lining-nums／标准数字
阿拉伯数字本来高度一致的写法。

onum／oldstyle-nums／旧式数字
把阿拉伯数字当作高低参差的小写拉丁字母来书写。可以想象哈利波特那味儿。

pnum／proportional-nums／比例数字
每个数字占据宽度不同，就像手写的间距。

tnum／tabular-nums／表格数字
每个数字占据宽度相等以便垂直对齐，方便财务比较。有时1字会加上脚部写法撑胖。等宽字体必定表格数字不含比例数，反之不然。

zero／slashed-zero／斜杠零
零+斜杠以强调字母O不是数字0，通常用于财务和编程。编程字体默认是表格数+斜杠零。

显然时间字体两种样式和斜杠零都无所谓，但间距只能选表格，否则用作计时整段数字就会抖来抖去。

冒号

可能看完上文的人会选择等宽字体，但只是等宽还不行（有些等宽字体出于编程用途区分字符会故意做得不好看，何况冒号也没必要与数字等宽）

冒号一般放置在基线上，与小写对齐，所以就不能同时与数字（常与大写差不多高）垂直居中对齐。时间、比分等需要整体垂直居中，由于没有专门的居中冒号，过去排版者会特意手调。

虽然没居中冒号，但有居中星号：[∗]U+2217算术星号，与[*]默认星号不同在于与数字对齐。

找到一个[∶]U+2236比号“RATIO”。相当于居中冒号，就是左右间距可能太宽了，显示比分倒没问题。

这属于排版技术，所以可由字体解决。比较先进的OT字体如苹果表（Apple Watch）启用的字体旧金山（SanFrancisco），可以就上下文判断是否数字自动替换成居中冒号。我做个例图演示下。

这个具体用到的是OT高级排版功能：calt／Contextual Alternates／上下文语境替代

calt是由Adobe登记的feature tag。顺带一提OT字体格式由Microsoft和Adobe共同开发。

试着反编译旧金山字体这段calt脚本，发现也很简单：

group @0_9 [zero one two three four five six seven eight nine]
   注：穷举一遍数字，组团。

lookup SingleSubstitution {
  sub colon -> colon.1;
……
  } 注：「colon.1」是个未映射的大写对齐冒号。

lookup ChainingContext {
  subtable "table1 {
    context (@0_9) colon (@0_9);
    sub 0 SingleSubstitution;
  } 注：只要上下文出现「@0_9 冒号 @0_9」这种组合就按SingleSubstitution替换冒号。

也就是任意字体加个「colon.1」和这个脚本就解决哩——

并不。虽然苹果的系统肯定支持，但许多老软件，尤其非专业排版软件支持有限或不支持OT高级排版。没办法，只能固定成ttf字体，即直接用「colon.1」代替「colon」放弃与小写对齐（旧式数字可以例外，因为我觉得相当于英文小写）

实际上我制作了些专门用于显示时间的字体。没有OT特性的。

下载

请至：magictea.cc/topic/1251/ 后续如有更新请见评论。

运用

安装字体后做视频（比如给音乐MV加个进度条）直接调用就可以。

对一般人也有用。假设你有装Stylus之类调整网页外观的用户样式管理器，可以加一条样式将播放器的时间字体修改了，如：

@-moz-document domain("bilibili.com") {
span[name="time_textarea"] {font-family:"【字体名】"}
} /*b站*/

@-moz-document domain("xiami.com") {
.handle{font-family:"【字体名】"}
} /*虾米*/

等等。

如果上文有问题或遗漏请评论，b专栏编辑次数不够用……