給像素字體加上高級排版特性:Ctrl Zpix介紹

如題圖,我也算參與了第二次r/place像素大戰(zhàn),為在搶占到的30×20像素尺寸下確保極限小的像素字清晰,使用了“半像素”技巧……
不過本文與此活動關(guān)系不大,除了一點:怎么能在面積限制下塞進(jìn)夠多文字又要保證美觀?在以前可沒法依賴現(xiàn)成的像素字體,尤其是西文。
有個很贊的中文像素字體:最像素〔github.com/SolidZORO/zpix-pixel-font,用于個人項目免費〕字面1200upm,每點100upm,在同為12點像素字體下該字體的漢字最為美觀。
不過,西文部分,

乍一看是等寬字體,字之間空隙非常大。但奇怪的是某些西文是全角的,比如半角全角同時出現(xiàn)在西里爾區(qū)段內(nèi),甚至某些字形是半角但占據(jù)全角寬度(右半是空白)

這太奇怪了,于是我給作者提交了issues,同時考慮,是否可以修改這個字體的西文部分……

準(zhǔn)確來說,我?guī)缀踉瓌?chuàng)了個西文像素字體來搭配最像素,并加上各種原字體沒有的排版特性(OpenType feature)

`kern` Kerning;
無論什么字體,設(shè)好字間距都很關(guān)鍵,而像素字體的字距更是只能整數(shù)單位。Ctrl Zpix設(shè)每個字間距為1格。類似“Lorem”這個“r”與“e”,“r”字形右方總要有1格間距,但“re”相遇時就會顯得過遠(yuǎn),視覺上距離仿佛有3格。該特性為這種特殊組合調(diào)整間距,既避免“rn”過近看起來像m,也避免“LT”過遠(yuǎn)。我放置了200多對`kern`。
這個特性倒不高級(指一般軟件默認(rèn)支持)

`liga` StandardLigatures;
該特性為連字,假設(shè)你在網(wǎng)頁中使用這個字體,那么瀏覽器默認(rèn)開啟(一般軟件不行,Ps之類有排版功能的軟件可能需要手動到字體面板里開啟或關(guān)閉)。注意下方“?”只是一個字符,視覺上比“f?f?i”均勻。另外本字體還有ff、fi、fl、ffl、st等連字。

`calt` ContextualAlternates;
肯定有人在想,既然存在ff連字,那遇到瞎打的ffffifff…會發(fā)生什么事?
該特性為根據(jù)上下文替換字形,瀏覽器默認(rèn)開啟。我設(shè)計為遇到這種情況,將前面已連字的ff再拆開,仍然保持視覺上均勻。

我以前專欄有介紹過,上下文替換字形這個特性非常強大,上方動圖中可以看到,Q、l、t 均根據(jù)上下文替換為異體:

`zero`?SlashedZero;
該特性為與O區(qū)分的斜線〇,瀏覽器默認(rèn)不開啟。需要在CSS里開啟相應(yīng)特性,或使用本字體支持的變體選擇符[VS1]:0?

`fwid` FullWidths; `pwid` ProportionalWidths;
該特性為批量替換字形:將普通ascii字符替換為全角;也可以反過來。瀏覽器當(dāng)然默認(rèn)不開啟,否則就會看見英文全變成全角了。需在CSS里開啟相應(yīng)特性。
`hist` HistoricalForms; `hlig` HistoricalLigatures;
該特性為批量替換歷史字形:歷史上,小寫“s”是寫作“?”的;st連字也寫作?t(?)。瀏覽器默認(rèn)不開啟,需在CSS里開……
`c2sc` SmallCapitalsFromCapitals; `smcp` SmallCapitals;
該特性為批量替換小型大寫體字形,分別是大寫轉(zhuǎn)小型大寫(I→?)、小寫轉(zhuǎn)小型大寫(i→?)。瀏覽器默認(rèn)不開啟,需在CSS……

`sups` Superscript;
該特性為批量替換字形:將數(shù)字或字母替換成上標(biāo)形式(123n→123?),瀏覽器當(dāng)然默認(rèn)不開啟……
`ccmp` GlyphComposition/Decomposition;
該特性為“拆解”字形,比如把i頭上的點去掉(實際上是替換成無點i:?),以便蓋上變音帽子(比如?)。瀏覽器默認(rèn)開啟,搭配下面2個特性實現(xiàn)拆解組合。
`mark` MarkPositioning; `mkmk`?MarkToMarkPositioning;
該特性為給字形蓋帽或加尾巴;和給蓋帽再蓋帽。瀏覽器默認(rèn)開啟。這個制作過程當(dāng)然不是自動的,需要設(shè)計師一個個標(biāo)記好錨點,告訴字體對應(yīng)的帽子蓋到哪。

……
總之,我在把適合西文字體的特性都加上試試。還有其它沒提的就當(dāng)作彩蛋罷。
字體發(fā)布在〔github.com/MY1L/Ctrl〕目的為搭配最像素使用,頂替其西文部分。我還做了一版“Ctrl Zpix Star”,上圖中出現(xiàn)了,每個單位像素都是“?”
由于是像素字體,為了確保對齊到像素,實際使用時字號應(yīng)該是12的整數(shù)倍,和最像素一樣,CSS寫法可以是:
(而視窗自帶的寫字板等則是9的整數(shù)倍,已換算過)