欢迎光临散文网 会员登陆 & 注册

【自制】我改造了 Twemoji 彩色字体【巨硬】

2021-10-15 22:36 作者:綿雲飴里  | 我要投稿

巨硬的视窗系统有一大问题:故意*不显示旗帜绘文字,不妨用 emojipedia.org/flags 测试。想在浏览器中看到旗帜,需要一些特殊手段。

emojipedia专门指出,只有巨硬显示成二字编码。对其它系统使用者:该截屏为视窗下旗帜绘文字铬系浏览器显示效果。

注*:据www.zhihu.com/question/263563654/answer/272577933,某微软员工(我猜是be5?)提供的内部文档要求

这个原因也简单:就是微软系统绘文字彩色**字体 Segoe UI Emoji 根本没旗帜,仅此而已。

注**:微软系统支持部分绘文字的字体是 Segoe UI Symbol,有些不支持彩色字体的软件会优先调用它显示绘文字。

如果有人需要了解有关绘文字呈现旗帜的原理,请见我先前的专栏:

但,为什么用绘文字(emoji)不用表情包?

在翻书查阅时总忍不住想,如果能对纸张Ctrl+F搜索该多好。

在翻网页时也总忍不住想,如果能Ctrl+F搜索图片或表情该多好。

绘文字虽然看起来像图标,但它是字符,有语义的,可以被Ctrl+F搜索,可以插在纯文本中跨平台传递和使用。

b站表情“小黄脸”中[喜极而泣]就是抄的😂U+1F602 FACE WITH TEARS OF JOY,[水稻]则有现成的🌾U+1F33E EAR OF RICE,但甚至b站专栏里都不能在文字中插b站表情图,自家都不能用的(也难以搜索),更谈不上跨平台。

实际上网站可以自定义绘文字显示,b站完全可以输入😂,显示[喜极而泣]图片,也许是技术力不足吧……
像Twemoji就是推特网站自定义的彩色绘文字图标,不服从平台默认绘文字显示,保证推特在各个平台显示绘文字效果一致,有些场合显示为位图,有些显示为svg矢量图。开源,图形许可为CC-BY 4.0,详见 github.com/twitter/twemoji

但不是网页彩色字体。


那么,什么是Twemoji Mozilla?

开头说到“想在浏览器中看到旗帜需要一些特殊手段”,其中最快手段,就是安装个火狐(Mozilla Firefox)完事。火狐自带一个绘文字字体 TwemojiMozilla.ttf,如其名,Mozilla将上文提及的Twemoji做成了彩色字体,而且是矢量的CPAL制式。截至本文发布时字体版本为「0.6.0 FontForge 2.0 : Twemoji Mozilla : 5-7-2021」,支持统一码13.0版的绘文字。

顺带一提字体许可协议为空白,且假设它跟随CC-BY 4.0而非OFL。

但有几个问题。

  • 字太小:火狐中每个绘文字仅显示为一汉字大,许多旗帜是看不清的。

  • 用不了:可能有人已经把TwemojiMozilla安装到系统里并折腾铬系浏览器(基于Chromium的)设法调用它,却显示为空白。火狐难道是故意的吗。

所以得改造。

字小的话就放大。但一个个放大不仅很憨,还可能对曲线造成破坏:字体有单位每eM(Units per Em,UPM)的参数。曲线放置点只能是整数,非整数放大势必导致曲线走形。

但我想到一个方法可以不动曲线也能放大。TwemojiMozilla的UPM设计是512,这数值是可以改的,比如改成320,那么字体渲染引擎会当作一个UPM320的字体去渲染——但曲线没有变动,所以字形凭空放大了1.6倍。不过实际用发现太大了些,超出行距影响排版。于是选择改为UPM342,放大倍数512/342≈1.497。行距一般在1.5上下。

同时为了显得与文字居中,略微下移字形。

浏览器实际截屏1.497倍的效果,有意展示一个复杂绘文字,可见细节相对清晰。注意CPAL制式下,链接文字里的绘文字可能会随字色而变色,这是正常的

其次,Mozilla当然不至于故意针对谷歌,TwemojiMozilla的另一个问题是没有后备单色字形。单色字形是针对不支持彩色字体的软件,这些软件使用字体时仍然能显示字,只是跟普通字体一样成单色了。

火狐自己就能显示彩色字体当然无所谓,但铬系浏览器至少某一版本会先看后备单色字形占据宽度,若看到后备单色字形占了个空白,就会当作彩色字形也空白,偶尔加粗和斜体也会直接调用后备字形。

这里没有简单的方法,我是纯手工添加了几百个后备字形(此处急需吐血绘文字)

也就是说不支持彩色字体的软件也能用我改造的TwemojiMozilla。但我不能保证显示成啥样,因为做了几百个后我就用方块填充剩余几千个了。

綿雲飴里 2021/10/13 17:25:44

3578个彩字的后备字形终于处理完了!关于肤色等无法通过形状区分的字符,我还加了文字:不支持彩字的软件至少能看个意思。

上为政确显示 🏻🏼🏽🏾🏿,下为不支持彩色字体的软件显示效果

标签(U+E000X区段)也有。我甚至给ZWJU+200D加了字形(尽管正常情况下显示不出来)

火狐会优先使用系统中安装的TwemojiMozilla。因此为能顶替火狐自带的,字体名称故意没改。

为了方便通过缩略图找字体我添加了“A”映射,有趣的是资源管理器中字体有可能会显示成这样

ISO 3166-1旗帜补充与妥协设计。

綿雲飴里 2021/10/9 14:13:21

推特(火狐版)的🇺🇸是18星。果然做字体也只能求形似嘛。

也许上推特的美国人都不识数呢(

参见 emojipedia.org/flag-united-states 。由于实际使用时绘文字太小看不清,许多旗帜都不一定遵循真实比例和缺斤少两

其它平台绘文字有立体的光影或勾边,Twemoji没有,因此有白底的旗帜会故意做成浅灰色以区别于白色背景。

ISO 3166-1二位字母代码是国际标准化组织、ISO 3166标准第一部分(ISO 3166-1)的二位字母表示方式,旨在为国家、属地、具特殊科学价值地点建立国际认可的代码。是目前应用最为广泛的国家代码,被大量应用于国家和地区顶级域名。初次发表于1974年。

注意到ISO 3166-1还存在特别保留代码,这些代码不会被变更挪作它义,所以也能放旗帜:

  • EZ欧元区(🇪🇿,Eurozone,没有旗帜,用€代替)

  • FX法国本土(🇫🇽,还是法国国旗)

  • SU苏联(🇸🇺,上个专栏说过)

  • UK联合王国(🇺🇰,根据GB英国(🇬🇧)的要求保留——可理解为耍特权,以使 UK 不被用于表示任何其他国家;欧盟委员会也用 UK 表示英国)

我寻思ISO 3166-1还存在未用代码,暂时拿来放RK琉球王国旗(🇷🇰)和我造的LQ琉球国旗(🇱🇶,不是OBS直播国国旗哦)

修正原TwemojiMozilla字体中SA沙特旗(🇸🇦)的一点错误。更新AF阿富汗旗(🇦🇫)等。

🇪🇿 🇫🇽 🇸🇺 🇺🇰 🇷🇰 🇱🇶,以及大概是全世界第一个更新的🇦🇫

怎么用?

安装字体并不会自动地让铬系浏览器显示它,毕竟浏览器认识Segoe UI Emoji,Mozilla?一看就是谷歌的竞争对手。强按谷歌接受TwemojiMozilla需要一段自定义CSS,如果有安装Stylus扩展,那么:

以上CSS仅改变旗帜,不影响Segoe UI Emoji其它字符。当然你也可以全部替换,并使用我绘制的Ctrl Zsye彩色字体:

然后b站(仅示例,前面需要改成你喜欢的字体):

下载:github.com/MY1L/Plur/releases


闲话。

綿雲飴里 2021/10/12 15:21:56

继续修改绘文字字体。推特绘文字的水果都非常潦草,堪比夜明卷心菜。橙子基本就是橙色的圆形。

🍊U+1F34A TANGERINE 查看Twemoji矢量图,确实是完美的正圆。

【自制】我改造了 Twemoji 彩色字体【巨硬】的评论 (共 条)

分享到微博请遵守国家法律