虎绿林已支持 Unicode 14.0 中几乎所有汉字的显示

@Ta 07-24 01:50发布,08-03 03:13修改 7521点击

虎绿林已改用我从字形维基生成的 Unicode 14 免版税字体,以下描述已过时。

虎绿林目前采用的字体:https://hu60.cn/q.php/bbs.topic.103591.html


过时描述

通过引入 Unifont天珩字库,虎绿林已支持 Unicode 13.0 中几乎所有汉字的显示。

动机

@𪛞𪛟 在用户名中使用生僻字,如果不加载额外汉字库,用户名将显示为空白。

该功能完成后,也可以改善帖子内容中生僻字的显示。

按需加载

只有遇到系统字体无法显示的字符时,才会加载上述字体,并且只有字符所在“Unicode平面”对应的字体文件会被加载。如果一个平面对应多种字体,会首先加载较小的字体看看能不能找到字符,如果找不到才会加载较大的字体。

字体缓存

缓存时间由浏览器决定,可长达数月,所以不用担心流量耗尽。就算点击刷新按钮也不会重新下载已缓存字体。

Unicode平面及其字体:

TH-Tshyn(天珩字库)文件较大,我考虑转为点阵字体来压缩大小。Unifont 就是 16x16 点阵字体,文件很小。

平面 0、平面 1:

  • unifont-14.0.04.woff2(1.11MB)

平面 0:

  • TH-Tshyn-P0.woff2(5.53MB)

平面 1、平面 3:

  • TH-Tshyn-P1.woff2(4.63MB)

平面 2:

  • TH-Tshyn-P2.woff2(8.97MB)

平面 16(造字区,字体厂商的私有编码):

  • TH-Tshyn-P16.woff2(8.96MB)

并非所有文件都会加载,比如,显示“𮐨𰻝蝄𮔊”只需加载以下字体:

图片.png

回复列表(34)
  • @Ta / 07-24 02:06 / /

    相关CSS

    https://gitee.com/hu60t/hu60wap6/blob/master/src/tpl/classic/css/default.css#L88

    @font-face {
      font-family: 'Unifont';
      unicode-range: U+0000-FFFF, U+10000-1FFFF;
      font-display: swap;
      src: local('Unifont'),
           url('https://file.hu60.cn/fonts/unifont/unifont-14.0.04.woff2') format('woff2'),
           url('https://file.hu60.cn/fonts/unifont/unifont-14.0.04.otf') format('opentype'),
           url('https://file.hu60.cn/fonts/unifont/unifont-14.0.04.ttf') format('truetype');
    }
    
    @font-face {
      font-family: 'TH-Tshyn-P0';
      unicode-range: U+0000-FFFF;
      font-display: swap;
      src: local('TH-Tshyn-P0'),
           url('https://file.hu60.cn/fonts/TH-Tshyn/TH-Tshyn-P0.woff2') format('woff2'),
           url('https://file.hu60.cn/fonts/TH-Tshyn/TH-Tshyn-P0.ttf') format('truetype');
    }
    
    @font-face {
      font-family: 'TH-Tshyn-P1';
      unicode-range: U+10000-1FFFF, U+30000-3FFFF;
      font-display: swap;
      src: local('TH-Tshyn-P1'),
           url('https://file.hu60.cn/fonts/TH-Tshyn/TH-Tshyn-P1.woff2') format('woff2'),
           url('https://file.hu60.cn/fonts/TH-Tshyn/TH-Tshyn-P1.ttf') format('truetype');
    }
    
    @font-face {
      font-family: 'TH-Tshyn-P2';
      unicode-range: U+20000-2FFFF;
      font-display: swap;
      src: local('TH-Tshyn-P2'),
           url('https://file.hu60.cn/fonts/TH-Tshyn/TH-Tshyn-P2.woff2') format('woff2'),
           url('https://file.hu60.cn/fonts/TH-Tshyn/TH-Tshyn-P2.ttf') format('truetype');
    }
    
    @font-face {
      font-family: 'TH-Tshyn-P16';
      unicode-range: U+100000-10FFFF;
      font-display: swap;
      src: local('TH-Tshyn-P16'),
           url('https://file.hu60.cn/fonts/TH-Tshyn/TH-Tshyn-P16.woff2') format('woff2'),
           url('https://file.hu60.cn/fonts/TH-Tshyn/TH-Tshyn-P16.ttf') format('truetype');
    }
    
    /*规定rem单位字体大小*/
    html {
      font-size: 16px !important;
      font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,
        "Apple Color Emoji","Segoe UI Emoji",
        /*用于显示生僻字*/
        serif,monospace,'Unifont','TH-Tshyn-P0','TH-Tshyn-P1','TH-Tshyn-P2','TH-Tshyn-P16';
    }
    
    input, textarea {
      font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,
        "Apple Color Emoji","Segoe UI Emoji",
        /*用于显示生僻字*/
        serif,monospace,'Unifont','TH-Tshyn-P0','TH-Tshyn-P1','TH-Tshyn-P2','TH-Tshyn-P16';
    }
    

    其中,sans-serif是本地默认字体,serif,monospace用于在默认字体不存在某些字符时优先加载其他本地字体用作显示,如果字符找到了,就不需要联网加载字体。

    local('Unifont')也是用于加载本地字体,如果本地存在同名字体,就不需要通过下方的url()下载。

    font-display: swap的作用是后台加载,字体未加载不会阻塞网页显示。

    至于input, textarea {}为什么要再指定一次,因为我发现不指定的话,它不受html {}定义的影响。

  • @Ta / 07-24 02:06 / /

    又是老虎和 Unicode 斗智斗勇的一天

  • @Ta / 07-24 02:21 / /

    @无名啊,准确的说,是和 @𪛞𪛟 斗智斗勇的一天。

  • @Ta / 07-24 07:03 / /

    @老虎会游泳
    我直呼好家伙,,真是兵贵神速,凌晨两点不到就把我名字干掉了
    坏孩子,其实你很好,但是还不够好

  • @Ta / 07-24 07:55 / /

    法律风险

    天珩字库是用其他字体里提取的字形拼凑而成的,网站引用该字库可能会被原字形著作权人起诉。

    本字库属于非盈利的、学习研究型的字库,目的是为了汉字等字符的显示,不制作或出售任何商业作品。字形版权:中易、华康、Iwata、Besta、方正。本字库中字体的字形均为上述公司制作,非本软件作者制作。本字库的字体属于已经公开的字体,故本字库仅仅起到收集整理的作用,方便用户使用。作者并未对字体做出任何有意义的改动,若有任何人以本字库的名义收取任何费用,本字库作者不承担任何连带责任。

  • @Ta / 07-24 09:12 / /
    感觉还是直接限制使用那些字比较好,额外加载字体的下载需求几率太大,就是大部分人最先看到的都是框框
  • @Ta / 07-24 09:33 / /

    另一个全Unihan字体

    http://www.8suh.com/common-chinese-font-download/

    字形来源依然不明,版权依然不清晰,法律风险依然存在。

    8StepsUnihan 整理了一套 unihan 字体,涵盖了大部分指定的 Unicode 汉字字符。 这些可以在 Internet 上免费获得,8StepsUnihan 只是为了您的方便而将它们打包。 8suhU1、8suhS1、8suhT1、8suhA1 和 8suhJ1 字体是 Simsun 字体的扩展,涵盖 Main、Ext A、Ext B、Ext C、Ext D、Ext E、Ext F、Ext G 和 Ext H 以及一些补充和私人使用 区域字形。 8suhS1、8suhT1、8suhA1 和 8suhJ1 包含简体、繁体、古汉和日本汉用户使用的字形。 Unicode Ver 14.0 已于 2021 年发布 Unihan Ext H,并包含在此 8suh 第二版中。

  • @Ta / 07-24 10:39 / /

    @神的孩子全跳舞,虎绿林有大量的帖子需要下载超过10MB的图片。所以下载两个不到10MB的字体似乎不成问题。而且图片不断有人发新的,字体则只需要加载一次。

  • @Ta / 07-24 09:41 / /

    @神的孩子全跳舞

    感觉还是直接限制使用那些字比较好

    帖子内容中无法正常显示某些汉字的感觉并不好。既然我们现在已经能够显示,为什么要退化到不能显示?

  • @Ta / 07-24 10:39 / /

    @神的孩子全跳舞

    就是大部分人最先看到的都是框框

    你加载大图的时候不也是先显示框框吗?这有何不可?而且和图片不同,你又不是每次都需要加载。一但字体下载完成,以后所有包含在字体中的字符都可以直接呈现。所以,大部分人最先看到的都是框框又有何不可?


    备注:如果字体不在内存而在硬盘,根据我的CSS设置(font-display: swap),可能还是会先看到框框然后马上变成文字。因为读取硬盘加载字体的过程被设为后台运行,网页会在字体尚未加载完成时就呈现给用户。我认为这没什么不好,比你完全看不到字体好得多。

  • @Ta / 07-24 10:41 / /

    参考资料

    维基百科:Unicode扩展汉字

    我准备从它给的PDF里提取字形,自己制作一个Unihan字体。


    更新:用在线版PDF字体提取工具,提取失败。汉字部分在PDF中可能是图片,不是字体。

  • @Ta / 07-24 09:35 / /

    关于法律风险

    也许不太重要,因为虎绿林里的侵权内容到处都是,比如:虎绿林对 的使用,都未得到著作权人的许可。

  • @Ta / 07-24 10:37 / /

    @神的孩子全跳舞,哦对了,提前预测哪些汉字可以正常显示、哪些汉字不能正常显示,几乎是不可能的。
    所以就算真的想直接限制使用那些字也做不到,比如我就得问你,是哪些字,哪些?哪些不能正常显示呢?
    每个系统显示汉字的能力是不同的,不可能提前预测!

    除非我们放弃曾经的所有修改,重新回到U+4E00U+9FA5狭窄范围,才有信心保证几乎所有系统都能显示,注意,也只是几乎

    而如果真的这么做,意味着我们之前的所有努力都白费了,那我们之前为什么要做那一系列的调查和研究

    所以我是不会选择倒退的。

  • @Ta / 07-24 14:22 / /
    @老虎会游泳,感觉行间距变小了,是错觉吗
  • @Ta / 07-24 16:59 / /
    这个法律风险吗?
    当年清朝推翻明朝有没有法律风险呀?推翻清朝有没有法律风险啊?共产党推翻国民党有没有法律风险啊?成立新中国有没有法律风险啊?

    额,说的比较大,那说小点,呼吸空气有没有滥用公共资源的风险啊,你今天吃了一条鱼,有没有谋杀生命的法律危险啊!我们使用的英文母,有没有侵犯大不列颠文化的风险啊?
    我怎么突然感觉生活中,世界到处都是法律风险了啊?
    额,这真是天天生活在危机中啊!
  • @Ta / 07-24 20:49 / /

    @希望自己长胖胖,我不会进行联想,但随意使用他人作品确实侵犯他人著作权。只是著作权是民事权利,不告不理。只有著作权人盯上你起诉你,你才会有麻烦。所以生活中大多数侵犯著作权的行为最终都没有受到追究。这也是虎绿林现存很多侵权作品(比如所有表情包)的原因。

  • @Ta / 07-24 20:55 / /

    @tasy5kg,这里有添加字体前的网站版本,你可以自行对比:
    https://dev.hu60.cn/q.php/bbs.topic.103535.html

  • @Ta / 07-25 02:48 / /
    @老虎会游泳,确实更加紧凑了(MIUI)
    IMG_20220725_024635.jpg
  • @Ta / 07-27 17:43 / /
添加新回复
回复需要登录