【自制】我改造了 Twemoji 彩色字體【巨硬】
巨硬的視窗系統(tǒng)有一大問題:故意*不顯示旗幟繪文字,不妨用?emojipedia.org/flags?測試。想在瀏覽器中看到旗幟,需要一些特殊手段。

注*:據(jù)www.zhihu.com/question/263563654/answer/272577933,某微軟員工(我猜是be5?)提供的內(nèi)部文檔要求
這個原因也簡單:就是微軟系統(tǒng)繪文字彩色**字體 Segoe UI Emoji 根本沒旗幟,僅此而已。
注**:微軟系統(tǒng)支持部分繪文字的字體是 Segoe UI Symbol,有些不支持彩色字體的軟件會優(yōu)先調(diào)用它顯示繪文字。
如果有人需要了解有關(guān)繪文字呈現(xiàn)旗幟的原理,請見我先前的專欄:


但,為什么用繪文字(emoji)不用表情包?
在翻書查閱時總?cè)滩蛔∠?,如果能對紙張Ctrl+F搜索該多好。
在翻網(wǎng)頁時也總?cè)滩蛔∠?,如果能Ctrl+F搜索圖片或表情該多好。
繪文字雖然看起來像圖標(biāo),但它是字符,有語義的,可以被Ctrl+F搜索,可以插在純文本中跨平臺傳遞和使用。
b站表情“小黃臉”中[喜極而泣]就是抄的??U+1F602 FACE WITH TEARS OF JOY,[水稻]則有現(xiàn)成的??U+1F33E EAR OF RICE,但甚至b站專欄里都不能在文字中插b站表情圖,自家都不能用的(也難以搜索),更談不上跨平臺。
實際上網(wǎng)站可以自定義繪文字顯示,b站完全可以輸入??,顯示[喜極而泣]圖片,也許是技術(shù)力不足吧……
像Twemoji就是推特網(wǎng)站自定義的彩色繪文字圖標(biāo),不服從平臺默認(rèn)繪文字顯示,保證推特在各個平臺顯示繪文字效果一致,有些場合顯示為位圖,有些顯示為svg矢量圖。開源,圖形許可為CC-BY 4.0,詳見 github.com/twitter/twemoji …
但不是網(wǎng)頁彩色字體。

那么,什么是Twemoji?Mozilla?
開頭說到“想在瀏覽器中看到旗幟需要一些特殊手段”,其中最快手段,就是安裝個火狐(Mozilla Firefox)完事?;鸷詭б粋€繪文字字體?TwemojiMozilla.ttf,如其名,Mozilla將上文提及的Twemoji做成了彩色字體,而且是矢量的CPAL制式。截至本文發(fā)布時字體版本為「0.6.0 FontForge 2.0 : Twemoji Mozilla : 5-7-2021」,支持統(tǒng)一碼13.0版的繪文字。
順帶一提字體許可協(xié)議為空白,且假設(shè)它跟隨CC-BY 4.0而非OFL。
但有幾個問題。
字太?。夯鸷忻總€繪文字僅顯示為一漢字大,許多旗幟是看不清的。
用不了:可能有人已經(jīng)把TwemojiMozilla安裝到系統(tǒng)里并折騰鉻系瀏覽器(基于Chromium的)設(shè)法調(diào)用它,卻顯示為空白。火狐難道是故意的嗎。

所以得改造。
字小的話就放大。但一個個放大不僅很憨,還可能對曲線造成破壞:字體有單位每eM(Units per Em,UPM)的參數(shù)。曲線放置點只能是整數(shù),非整數(shù)放大勢必導(dǎo)致曲線走形。
但我想到一個方法可以不動曲線也能放大。TwemojiMozilla的UPM設(shè)計是512,這數(shù)值是可以改的,比如改成320,那么字體渲染引擎會當(dāng)作一個UPM320的字體去渲染——但曲線沒有變動,所以字形憑空放大了1.6倍。不過實際用發(fā)現(xiàn)太大了些,超出行距影響排版。于是選擇改為UPM342,放大倍數(shù)512/342≈1.497。行距一般在1.5上下。
同時為了顯得與文字居中,略微下移字形。

其次,Mozilla當(dāng)然不至于故意針對谷歌,TwemojiMozilla的另一個問題是沒有后備單色字形。單色字形是針對不支持彩色字體的軟件,這些軟件使用字體時仍然能顯示字,只是跟普通字體一樣成單色了。
火狐自己就能顯示彩色字體當(dāng)然無所謂,但鉻系瀏覽器至少某一版本會先看后備單色字形占據(jù)寬度,若看到后備單色字形占了個空白,就會當(dāng)作彩色字形也空白,偶爾加粗和斜體也會直接調(diào)用后備字形。
這里沒有簡單的方法,我是純手工添加了幾百個后備字形(此處急需吐血繪文字)
也就是說不支持彩色字體的軟件也能用我改造的TwemojiMozilla。但我不能保證顯示成啥樣,因為做了幾百個后我就用方塊填充剩余幾千個了。
綿雲(yún)飴里 2021/10/13 17:25:44
3578個彩字的后備字形終于處理完了!關(guān)于膚色等無法通過形狀區(qū)分的字符,我還加了文字:不支持彩字的軟件至少能看個意思。

標(biāo)簽(U+E000X區(qū)段)也有。我甚至給ZWJU+200D加了字形(盡管正常情況下顯示不出來)
火狐會優(yōu)先使用系統(tǒng)中安裝的TwemojiMozilla。因此為能頂替火狐自帶的,字體名稱故意沒改。


ISO 3166-1旗幟補(bǔ)充與妥協(xié)設(shè)計。
綿雲(yún)飴里 2021/10/9 14:13:21
推特(火狐版)的????是18星。果然做字體也只能求形似嘛。

參見 emojipedia.org/flag-united-states 。由于實際使用時繪文字太小看不清,許多旗幟都不一定遵循真實比例和缺斤少兩。
其它平臺繪文字有立體的光影或勾邊,Twemoji沒有,因此有白底的旗幟會故意做成淺灰色以區(qū)別于白色背景。
ISO 3166-1二位字母代碼是國際標(biāo)準(zhǔn)化組織、ISO 3166標(biāo)準(zhǔn)第一部分(ISO 3166-1)的二位字母表示方式,旨在為國家、屬地、具特殊科學(xué)價值地點建立國際認(rèn)可的代碼。是目前應(yīng)用最為廣泛的國家代碼,被大量應(yīng)用于國家和地區(qū)頂級域名。初次發(fā)表于1974年。
注意到ISO 3166-1還存在特別保留代碼,這些代碼不會被變更挪作它義,所以也能放旗幟:
EZ歐元區(qū)(????,Eurozone,沒有旗幟,用€代替)
FX法國本土(????,還是法國國旗)
SU蘇聯(lián)(????,上個專欄說過)
UK聯(lián)合王國(????,根據(jù)GB英國(????)的要求保留——可理解為耍特權(quán),以使 UK 不被用于表示任何其他國家;歐盟委員會也用 UK 表示英國)
我尋思ISO 3166-1還存在未用代碼,暫時拿來放RK琉球王國旗(????)和我造的LQ琉球國旗(????,不是OBS直播國國旗哦)
修正原TwemojiMozilla字體中SA沙特旗(????)的一點錯誤。更新AF阿富汗旗(????)等。


怎么用?
安裝字體并不會自動地讓鉻系瀏覽器顯示它,畢竟瀏覽器認(rèn)識Segoe UI Emoji,Mozilla?一看就是谷歌的競爭對手。強(qiáng)按谷歌接受TwemojiMozilla需要一段自定義CSS,如果有安裝Stylus擴(kuò)展,那么:
以上CSS僅改變旗幟,不影響Segoe UI Emoji其它字符。當(dāng)然你也可以全部替換,并使用我繪制的Ctrl Zsye彩色字體:
然后b站(僅示例,前面需要改成你喜歡的字體):
下載:github.com/MY1L/Plur/releases

閑話。
綿雲(yún)飴里 2021/10/12 15:21:56
繼續(xù)修改繪文字字體。推特繪文字的水果都非常潦草,堪比夜明卷心菜。橙子基本就是橙色的圓形。

??U+1F34A TANGERINE?查看Twemoji矢量圖,確實是完美的正圓。