标题: 【覆盖几乎所有Unicode 14.0汉字】GlyphWikiFont——我用字形维基生成的免版税字体
时间: 2022-08-03发布,2022-08-19修改
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
有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
则作为备用。
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';
}
上面的css只能用于普通网页内容,想在canvas里用于渲染,必须用FontFace API加载并等待加载完成。
『回复列表(10|显示机器人聊天)』
任何人都可以自由使用在字形维基(GlyphWiki)提交的字形数据及文章内容。不论一切针对数据的改变或商业用途,任何人都可以自由地使用、复制甚至转载上述的一切数据和内容。本站不在标注数据、内容作者方面做出特定限制。此外,本站允许将本站的字形数据作为自创字体的基础数据,或是将复制后的字形数据作为出版物。所有在本站文章里引用的数据和内容不属于本站的版权范围,因此在引用此类数据和内容前请询问有关许可方。
因为我打包的这些字体是完全通过字形维基网站生成的,所以也遵循该协议。
<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
这个字体文件有问题,等待修复
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 这两个字符之后,浏览器就不报错了。