【字体下载】通过自制网页字体来改善饼维基样式

[綿雲飴里]

前天回家了。
与其说回家不如说在家住院，因为病没好只是被判断不传染，不吊水改为每天吃4种药（其中益肝灵还是“不良反应尚不明确”的中药，呃）。
但总算可以睡好觉了，上个月几乎没怎么睡。
回家就睡了2天到现在。

㋿

先前写过饼维基css字体笔记，结语是——

可惜的是这些字体方面的效果一般手机上是看不到的，……
其实这一切都可以通过定制网页字体解决，而wikia好像是故意不支持。

接下来试着在不依靠wikia的独立站点测试网页字体，是的，我花了一个月自制了一个支持连字的字体。

→download：QuQi.otf 2019-5-9 v1.00←

• 包含302个字符：“”，★☆，❛❜❟，〆，〜(U+301C)，ぁ~ヿ，㋿(U+32FF)，～(U+FF5E)，｡~ﾟ，
• • (U+1F201)其实画成了 コ↑コ↓
• 该字体日文部分基本是Meiryo UI改，但为了搭配微软雅黑调整了字重。
• • 其中假名为比例宽度。
• • 目前不含超纲的假名(江/ye)，因为没见到有饼民用于作品。
• 因为完全没有英文，某些软件可能不当作字体。

---

令和合字

日本年号变更，你是否因此而在改程序呢～～ - V2EX

上述包含字符其中U+32FF是新年号合字：令和，跟㍻㍼㍽㍾是一样的。先前几乎没有字体支持，我原想当第一个所以一个月前就在搞——但拖到现在早已经有人先做了，比如Source Han Sans Version 2.001（2019-4-9，一个月前）。更别说微软都有更新补丁kb4469068了。

伴随新年号的公开，CJK互換用文字是否有了扩充的必要？ - 知乎

这个议题可以回溯到2017年在呼和浩特举办的WG2上。当时平成天皇已经提出了退位的想法，也就意味着日本需要改元。Unicode诞生于90年代初，而平成元年是1989年，所以这也是Unicode从没遇到过的问题。㍻㍼㍽㍾的前后已经没有任何空位给新的年号（JIS有，等价于ISO-2022-JP、EUC-JP、Shift_JIS等有）。当时有其他专家向日本专家提出了是否需要新年号合字的问题，日本方面的答复是，那是遗留问题，不需要的。我当时就提醒了别的专家，别相信日本代表这时候的“规划”（划掉，鬼话）。果不其然，不久后他们就提出了要预留码位的提案。

我是使用齢+㍼改的，比思源黑体那些明显被门挤的半角假名好看些。
我没有知乎，希望有人帮我回一下“也搞了个支持令和合字的字体”。

---

连字

OpenType格式的字体和TTF区别大了。OTF具有很多高级字形特征，靠内置的简单脚本来实现复杂字形效果，这些脚本以不同的标签来分类，效果靠排版软件体现，比如Indesign和火狐浏览器（谷歌一派可能支持不充分）。

我的字体中，

• 令和会自动组成一个字。
• PUA放了14个没有对应符号的半浊点假名ligature（连字），比如く゚（实为く+゜）ト゚（ト+゜），很多日文字体自带这个功能。

视频演示：

具体范例可查阅：OpenType 字体功能 | Microsoft Docs

我的字体所用脚本：

script DFLT {
  feature Liga;
}

feature Liga liga {
  lookup R18;
  lookup soundmark;
}

lookup R18 {
  sub uni4EE4 uni548C -> uni32FF;
}

lookup soundmark {
  sub uni3046 uni3099 -> uni3094;
  sub uni304B uni3099 -> uni304C;
  sub uni304B uni309A -> uni304B_uni309A;
  sub uni304D uni3099 -> uni304E;
  sub uni304D uni309A -> uni304D_uni309A;
  sub uni304F uni3099 -> uni3050;
  sub uni304F uni309A -> uni304F_uni309A;
  sub uni3051 uni3099 -> uni3052;
  sub uni3051 uni309A -> uni3051_uni309A;
  sub uni3053 uni3099 -> uni3054;
  sub uni3053 uni309A -> uni3053_uni309A;
  sub uni3055 uni3099 -> uni3056;
  sub uni3057 uni3099 -> uni3058;
  sub uni3059 uni3099 -> uni305A;
  sub uni305B uni3099 -> uni305C;
  sub uni305D uni3099 -> uni305E;
  sub uni305F uni3099 -> uni3060;
  sub uni3061 uni3099 -> uni3062;
  sub uni3064 uni3099 -> uni3065;
  sub uni3066 uni3099 -> uni3067;
  sub uni3068 uni3099 -> uni3069;
  sub uni306F uni3099 -> uni3070;
  sub uni306F uni309A -> uni3071;
  sub uni3072 uni3099 -> uni3073;
  sub uni3072 uni309A -> uni3074;
  sub uni3075 uni3099 -> uni3076;
  sub uni3075 uni309A -> uni3077;
  sub uni3078 uni3099 -> uni3079;
  sub uni3078 uni309A -> uni307A;
  sub uni307B uni3099 -> uni307C;
  sub uni307B uni309A -> uni307D;
  sub uni309D uni3099 -> uni309E;
  sub uni30A6 uni3099 -> uni30F4;
  sub uni30AB uni3099 -> uni30AC;
  sub uni30AB uni309A -> uni30AB_uni309A;
  sub uni30AD uni3099 -> uni30AE;
  sub uni30AD uni309A -> uni30AD_uni309A;
  sub uni30AF uni3099 -> uni30B0;
  sub uni30AF uni309A -> uni30AF_uni309A;
  sub uni30B1 uni3099 -> uni30B2;
  sub uni30B1 uni309A -> uni30B1_uni309A;
  sub uni30B3 uni3099 -> uni30B4;
  sub uni30B3 uni309A -> uni30B3_uni309A;
  sub uni30B5 uni3099 -> uni30B6;
  sub uni30B7 uni3099 -> uni30B8;
  sub uni30B9 uni3099 -> uni30BA;
  sub uni30BB uni3099 -> uni30BC;
  sub uni30BB uni309A -> uni30BB_uni309A;
  sub uni30BD uni3099 -> uni30BE;
  sub uni30BF uni3099 -> uni30C0;
  sub uni30C1 uni3099 -> uni30C2;
  sub uni30C4 uni3099 -> uni30C5;
  sub uni30C4 uni309A -> uni30C4_uni309A;
  sub uni30C6 uni3099 -> uni30C7;
  sub uni30C8 uni3099 -> uni30C9;
  sub uni30C8 uni309A -> uni30C8_uni309A;
  sub uni30CF uni3099 -> uni30D0;
  sub uni30CF uni309A -> uni30D1;
  sub uni30D2 uni3099 -> uni30D3;
  sub uni30D2 uni309A -> uni30D4;
  sub uni30D5 uni3099 -> uni30D6;
  sub uni30D5 uni309A -> uni30D7;
  sub uni30D8 uni3099 -> uni30D9;
  sub uni30D8 uni309A -> uni30DA;
  sub uni30DB uni3099 -> uni30DC;
  sub uni30DB uni309A -> uni30DD;
  sub uni30EF uni3099 -> uni30F7;
  sub uni30F0 uni3099 -> uni30F8;
  sub uni30F1 uni3099 -> uni30F9;
  sub uni30F2 uni3099 -> uni30FA;
  sub uni30FD uni3099 -> uni30FE;
  sub uni31F7 uni309A -> uni31F7_uni309A;
}

上述GSUB标签liga含义是“Common ligatures/通用连字”——其实我只会这个。

---

CSS

你可以使用诸如Stylus这类插件来调用，字体名是“曲奇”或“QuQi”，比如本站就可以这么改：

@font-face {
  font-family:曲奇;
  src:local(曲奇),
  url('https://magictea.cc/assets/uploads/files/1557297040280-quqi.otf') format("opentype");
}

body {
    font-family: 曲奇,Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif;
}

复制上面2块放到Stylus里应该就可以把本站的☆符全改了。
我不是非常明白为什么本站把Roboto放前面……

你可以加一行font-feature-settings: "liga" 0强制关闭连字，但没必要。

具体CSS运用参见：CSS font-feature-settings 50+关键字属性值完整介绍 « 张鑫旭

---

下一步

• 争取做一个完全原创的字体，不再基于Meiryo UI。
• 准备加粗体。显然直接加粗是不行的。
• 准备加半角平假名。（平假名没有半角字符，也许也用不着……）
• 准备搞定favicon字体，用于高分屏。

[KeKaoJun]

辛苦了哇。
不过建议还是先以养病为主哇

[新造人间初月]

恭喜出院啦
大概哪时候可以回去discord那边呢？

[P.M.]

来迟了，不过一定要多保重身体

[綿雲飴里]

@新造人间初月 这周我想睡觉。
我已经没法流利地写出表意准确的内容了。

[綿雲飴里]

弄了不少网站的矢量图准备搞定favicon字体，发现了一些问题：ttf有锯齿，otf系统提示不是“有效的字体”。
仅作测试。

就是这个Favicon.otf，无法调用，不清楚怎么回事。