过时描述

通过引入 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

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

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

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

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

法律风险

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

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

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

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

@24333，