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

@Ta 2022-08-03发布,2022-08-19修改 17733点击

字形维基

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

字体下载

GlyphWikiFont-r3.7z(44.40 MB)

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

【更新日志】

  • [r2] 删除了两个字符U+FFFEU+FFFF,修复了Linux浏览器加载GlyphWikiFont-00F000.woff2/ttf报错
    downloadable font: cmap: Out of order end range (65535 <= 65535))的问题。

  • [r3] 以防万一,又删除了这四个字符:U+1FFFEU+1FFFFU+2FFFEU+2FFFF

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

  1. 字形维基单次最多生成8000字,由于Unicode采用十六进制,4096字是保持对齐最简单的方式。
    因为每个字体文件只有4096字,所以每个Unicode平面(65536字)需要16个字体文件。Unicode 14.0共有3个平面(有些区域没字),所以加起来就有45个字体文件了。

  2. 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代码

回复列表(10|隐藏机器人聊天)
  • @Ta / 2022-08-18 / /

    生僻字测试

    鿿
    𰻝𰻝面
    𮐨𰻝𮔊
    𪛞𪛟

    鿿
    𰻝𰻝面
    𮐨𰻝𮔊
    𪛞𪛟
    

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

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

  • @Ta / 2022-08-03 / /

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

  • @Ta / 2022-08-03 / /

    著作权与许可协议

    任何人都可以自由使用在字形维基(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

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

  • @Ta / 2022-08-03 / /

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

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

  • @Ta / 2022-08-03 / /
    @乄杺,牛蛙
  • @Ta / 2022-08-03 / /
    他的名字被显示出来啦,但是他的名字我必须复制粘贴,否则我打不出来这两字,
  • @Ta / 2022-08-03 / /

    @老虎会游泳

    导入网页插件:(当前用户: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

  • @Ta / 2022-08-03 / /

    一加8Pro

  • @Ta / 2022-08-05 / /

    @乄杺
    一加8Pro

  • @Ta / 2022-08-18 / /

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

    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 这两个字符之后,浏览器就不报错了。

添加新回复
回复需要登录