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

老虎会游泳

@Ta 2022-07-24发布，2022-08-03修改 15619点击

虎绿林已改用我从字形维基生成的 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

隐藏样式查看源码

回复列表(32|隐藏机器人聊天)

老虎会游泳

@Ta / 2022-07-24 / 样 / 源

@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 {}定义的影响。

2

无名啊

@Ta / 2022-07-24 / 样 / 源

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

老虎会游泳

@Ta / 2022-07-24 / 样 / 源

@无名啊，准确的说，是和 @乄杺斗智斗勇的一天。
4

乄杺

@Ta / 2022-07-24 / 样 / 源

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

老虎会游泳

@Ta / 2022-07-24 / 样 / 源

法律风险

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

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

老虎会游泳

@Ta / 2022-07-24 / 样 / 源

另一个全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 第二版中。
8

老虎会游泳

@Ta / 2022-07-24 / 样 / 源

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

老虎会游泳

@Ta / 2022-07-24 / 样 / 源

@24333，

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

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

老虎会游泳

@Ta / 2022-07-24 / 样 / 源

@24333，

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

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

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

老虎会游泳

@Ta / 2022-07-24 / 样 / 源

参考资料

维基百科:Unicode扩展汉字

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

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

老虎会游泳

@Ta / 2022-07-24 / 样 / 源

关于法律风险

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

老虎会游泳

@Ta / 2022-07-24 / 样 / 源

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

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

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

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

tasy5kg

@Ta / 2022-07-24 / 样 / 源

@老虎会游泳，感觉行间距变小了，是错觉吗
16

老虎会游泳

@Ta / 2022-07-24 / 样 / 源

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

老虎会游泳

@Ta / 2022-07-24 / 样 / 源

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

tasy5kg

@Ta / 2022-07-25 / 样 / 源

@老虎会游泳，确实更加紧凑了（MIUI）
19

biuaxia

@Ta / 2022-07-27 / 样 / 源

@周松松
20

胡椒舰长

@Ta / 2022-07-27 / 样 / 源

@老虎会游泳，可以用苹方，那个好看
21

老虎会游泳

@Ta / 2022-07-27 / 样 / 源

@胡椒舰长，苹方没有“𮐨𰻝𮔊”，我看过了。