给像素字体加上高级排版特性:Ctrl Zpix介绍

如题图,我也算参与了第二次r/place像素大战,为在抢占到的30×20像素尺寸下确保极限小的像素字清晰,使用了“半像素”技巧……
不过本文与此活动关系不大,除了一点:怎么能在面积限制下塞进够多文字又要保证美观?在以前可没法依赖现成的像素字体,尤其是西文。
有个很赞的中文像素字体:最像素〔github.com/SolidZORO/zpix-pixel-font,用于个人项目免费〕字面1200upm,每点100upm,在同为12点像素字体下该字体的汉字最为美观。
不过,西文部分,

乍一看是等宽字体,字之间空隙非常大。但奇怪的是某些西文是全角的,比如半角全角同时出现在西里尔区段内,甚至某些字形是半角但占据全角宽度(右半是空白)

这太奇怪了,于是我给作者提交了issues,同时考虑,是否可以修改这个字体的西文部分……

准确来说,我几乎原创了个西文像素字体来搭配最像素,并加上各种原字体没有的排版特性(OpenType feature)

`kern` Kerning;
无论什么字体,设好字间距都很关键,而像素字体的字距更是只能整数单位。Ctrl Zpix设每个字间距为1格。类似“Lorem”这个“r”与“e”,“r”字形右方总要有1格间距,但“re”相遇时就会显得过远,视觉上距离仿佛有3格。该特性为这种特殊组合调整间距,既避免“rn”过近看起来像m,也避免“LT”过远。我放置了200多对`kern`。
这个特性倒不高级(指一般软件默认支持)

`liga` StandardLigatures;
该特性为连字,假设你在网页中使用这个字体,那么浏览器默认开启(一般软件不行,Ps之类有排版功能的软件可能需要手动到字体面板里开启或关闭)。注意下方“ffi”只是一个字符,视觉上比“f f i”均匀。另外本字体还有ff、fi、fl、ffl、st等连字。

`calt` ContextualAlternates;
肯定有人在想,既然存在ff连字,那遇到瞎打的ffffifff…会发生什么事?
该特性为根据上下文替换字形,浏览器默认开启。我设计为遇到这种情况,将前面已连字的ff再拆开,仍然保持视觉上均匀。

我以前专栏有介绍过,上下文替换字形这个特性非常强大,上方动图中可以看到,Q、l、t 均根据上下文替换为异体:

`zero` SlashedZero;
该特性为与O区分的斜线〇,浏览器默认不开启。需要在CSS里开启相应特性,或使用本字体支持的变体选择符[VS1]:0︀

`fwid` FullWidths; `pwid` ProportionalWidths;
该特性为批量替换字形:将普通ascii字符替换为全角;也可以反过来。浏览器当然默认不开启,否则就会看见英文全变成全角了。需在CSS里开启相应特性。
`hist` HistoricalForms; `hlig` HistoricalLigatures;
该特性为批量替换历史字形:历史上,小写“s”是写作“ſ”的;st连字也写作ſt(ſt)。浏览器默认不开启,需在CSS里开……
`c2sc` SmallCapitalsFromCapitals; `smcp` SmallCapitals;
该特性为批量替换小型大写体字形,分别是大写转小型大写(I→ɪ)、小写转小型大写(i→ɪ)。浏览器默认不开启,需在CSS……

`sups` Superscript;
该特性为批量替换字形:将数字或字母替换成上标形式(123n→¹²³ⁿ),浏览器当然默认不开启……
`ccmp` GlyphComposition/Decomposition;
该特性为“拆解”字形,比如把i头上的点去掉(实际上是替换成无点i:ı),以便盖上变音帽子(比如ĩ)。浏览器默认开启,搭配下面2个特性实现拆解组合。
`mark` MarkPositioning; `mkmk` MarkToMarkPositioning;
该特性为给字形盖帽或加尾巴;和给盖帽再盖帽。浏览器默认开启。这个制作过程当然不是自动的,需要设计师一个个标记好锚点,告诉字体对应的帽子盖到哪。

……
总之,我在把适合西文字体的特性都加上试试。还有其它没提的就当作彩蛋罢。
字体发布在〔github.com/MY1L/Ctrl〕目的为搭配最像素使用,顶替其西文部分。我还做了一版“Ctrl Zpix Star”,上图中出现了,每个单位像素都是“✨”
由于是像素字体,为了确保对齐到像素,实际使用时字号应该是12的整数倍,和最像素一样,CSS写法可以是:
(而视窗自带的写字板等则是9的整数倍,已换算过)