您现在还未登录!

登录/注册后可体验更多内容。如未找到验证邮件,请查看垃圾箱或"点击右上角头像"-->"编辑资料"重新发送。

QQ手机/电脑邮箱无法在移动端注册/验证,使用网页版即可。请使用非国产浏览器(建议Chrome/Firefox)登录。

PS:密码找回重做中,请点击此处来找回。点击边栏前往其余页面。

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


  • 圈内名人 木毛认可 饼☆

    前天回家了。
    与其说回家不如说在家住院,因为病没好只是被判断不传染,不吊水改为每天吃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字体,用于高分屏。

  • 圈内名人 捐赠者 SCP基金会 女装人研究会 Tree Shade VPG

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


  • 木毛认可 捐赠者

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



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


  • 圈内名人 木毛认可 饼☆

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


  • 圈内名人 木毛认可 饼☆

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

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


Log in to reply
 

更多本版内容

友情链接

中文InmWiki 中文饼Wiki InmTieba 例区Discord afdian “bilibili” TIS v2mm | 自由职业者社区