【覆盖几乎所有Unicode 14.0汉字】GlyphWikiFont——我用字形维基生成的免版税字体

字形维基

https://zhs.glyphwiki.org/wiki/Group:hu60_GlyphWikiFont-000000
https://zhs.glyphwiki.org/wiki/Group:hu60_GlyphWikiFont-001000
https://zhs.glyphwiki.org/wiki/Group:hu60_GlyphWikiFont-002000
……
https://zhs.glyphwiki.org/wiki/Group:hu60_GlyphWikiFont-031000

完整列表：
https://zhs.glyphwiki.org/wiki/User:hu60

字体下载

GlyphWikiFont-r3.7z（44.40 MB）

有45个字体，每个字体又有.ttf和.woff2两种格式，共90个文件。

【更新日志】

[r2] 删除了两个字符U+FFFE和U+FFFF，修复了Linux浏览器加载GlyphWikiFont-00F000.woff2/ttf报错
（downloadable font: cmap: Out of order end range (65535 <= 65535)）的问题。
[r3] 以防万一，又删除了这四个字符：U+1FFFE、U+1FFFF、U+2FFFE、U+2FFFF。

为什么要分这么多个字体文件？

字形维基单次最多生成8000字，由于Unicode采用十六进制，4096字是保持对齐最简单的方式。
因为每个字体文件只有4096字，所以每个Unicode平面（65536字）需要16个字体文件。Unicode 14.0共有3个平面（有些区域没字），所以加起来就有45个字体文件了。
CSS unicode-range可以指定字体对应的Unicode范围，只在需要用到某字时才会去下载它对应范围的字体。
这样一来，字体文件越小就越有优势，因为单次下载的量也小，下载速度也就更快。
所以我没有对字体进行合并，保留了原始的45个字体文件。

`.ttf`和`.woff2`有什么区别？

.woff2是浏览器在CSS @font-face里专用的字体格式，操作系统通常不支持，不能直接安装，只能用于网页。
.ttf可以直接安装到操作系统中，但比.woff2大很多，不适合网页。
不过旧浏览器可能不支持.woff2，只支持.ttf，所以我下面的CSS两种都提供了，优先.woff2，.ttf则作为备用。

CSS网页字体定义

unicode-range属性很重要，如果没有它，每次显示生僻字时都会下载全部字体，那性能就非常差了。

定义unicode-range之后，只有出现生僻字的时候才会下载对应的字体文件，用不上的字体文件不会被下载。

【更新日志】

[2022-08-18]
偶然发现多个字体文件对应同一个font-family是完全可以的，所以删掉了多余的font-family定义。
[2022-08-19]
为了让旧版安卓webview和Linux chrome浏览器能正常显示彩色emoji表情，添加了emoji.css，里面有Noto Color Emoji的网页字体文件（8MB）。
新版安卓webview用户无需担心下载8MB的问题，因为新版可以正常匹配到本地emoji字体，无需下载。
苹果、Windows和火狐用户则可以匹配到前三个系统自带emoji字体，也不需要下载。

在网页中使用的方法

/*导入emoji字体（注意：@import只能出现在CSS的开头）*/
@import url('https://hu60.cn/tpl/jhin/css/emoji.css');

/*导入字形维基字体（注意：@import只能出现在CSS的开头）*/
@import url('https://hu60.cn/tpl/jhin/css/GlyphWikiFont.css');

html, input, textarea {
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,
    "Apple Color Emoji","Segoe UI Emoji","Twemoji Mozilla","Noto Color Emoji",
    /*优先系统字体*/
    system-ui,fangsong,serif,monospace,emoji,math,cursive,fantasy,
    /*用于显示生僻字*/
    'GlyphWikiFont';
}

code {
  font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace,
    "Apple Color Emoji","Segoe UI Emoji","Twemoji Mozilla","Noto Color Emoji",
    /*优先系统字体*/
    sans-serif,serif,system-ui,fangsong,emoji,math,cursive,fantasy,
    /*用于显示生僻字*/
    'GlyphWikiFont';
}

在Canvas中使用

上面的css只能用于普通网页内容，想在canvas里用于渲染，必须用FontFace API加载并等待加载完成。

HTML代码

生僻字测试

鿿
𰻝𰻝面
𮐨𰻝𮔊
𪛞𪛟

鿿
𰻝𰻝面
𮐨𰻝𮔊
𪛞𪛟

这些字都来自 @乄杺用过的昵称
应该感谢 @乄杺，是他推动了我生成该字体。

顺便测试emoji是否能正常显示：😀😂😅😇😌😉😊😁😄🤣😃😆🐲👨‍👧‍👧🤦🏻‍♀️🐯🦅🐇🥌⛷🌏

，，，我就是想设置个空白用户名装13
坏孩子，其实你很好，但是还不够好

著作权与许可协议

任何人都可以自由使用在字形维基（GlyphWiki）提交的字形数据及文章内容。不论一切针对数据的改变或商业用途，任何人都可以自由地使用、复制甚至转载上述的一切数据和内容。本站不在标注数据、内容作者方面做出特定限制。此外，本站允许将本站的字形数据作为自创字体的基础数据，或是将复制后的字形数据作为出版物。所有在本站文章里引用的数据和内容不属于本站的版权范围，因此在引用此类数据和内容前请询问有关许可方。

原文：https://zhs.glyphwiki.org/wiki/GlyphWiki:%E8%91%97%E4%BD%9C%E6%9D%83%E4%B8%8E%E8%AE%B8%E5%8F%AF%E5%8D%8F%E8%AE%AE

因为我打包的这些字体是完全通过字形维基网站生成的，所以也遵循该协议。

@乄杺，而我的目的就是保证虎绿林的所有用户名都能正常显示。我既然做出了放宽用户名字符范围的承诺，我就应该为用户名的正常显示负责。

字形维基有一个简单好用的造字程序，所以以后再有缺字问题我就可以自己造。回头看

@老虎会游泳，

导入网页插件：额（当前用户：1，总安装次数：1）

<script type="text/javascript" src="api.webplug-file.21479_public_huarongdao.js"></script>
 <script src="https://file.hu60.cn/file/hash/js/6a444ef30fd7e0d84488f1befc75e30c2329.js"> </script>
<script>

document.addEventListener('DOMContentLoaded', function () {

  document.querySelectorAll('.userlink').forEach(x => {

    x.href = atob(new URLSearchParams(new URL(x.href).search).get("url64").replace(/\./g, "=").replace(/-/g, "+").replace(/_/g, "/"))

    if(new URL(x.href).host !== location.host) {

        x.target = "__blank"

        x.rel="noopener noreferrer"

    }

  });

});

</script>

<script src="api.webplug-file.841_public_toolbar_webplug_torn.js"></script>
<script src="/tpl/classic/js/humanize/humanize.js"></script>
<script src="https://dev.hu60.cn/q.php/api.webplug-file.111.js"></script>

一加8Pro

@乄杺，
一加8Pro

这个字体文件有问题，等待修复

https://zhs.glyphwiki.org/wiki/Group:hu60_GlyphWikiFont-00F000
https://file.hu60.cn/fonts/GlyphWikiFont/GlyphWikiFont-00F000.woff2
https://file.hu60.cn/fonts/GlyphWikiFont/GlyphWikiFont-00F000.ttf

已修复，删掉了 U+FFFE 和 U+FFFF 这两个字符之后，浏览器就不报错了。