系统肯定没得中文字体、

字体切割，按需加载单个汉字
github.com/KonghaYao/cn-font-split

www.ruanyifeng.com/blog/2014/07/chinese_fonts.html

一个字体 36M 。

我记得有个 js 可以收集当前网页里的中文字动态生成一个字体地址。

以前有个叫 字蛛(FontSpider) 的挺好用：从 HTML 中找到需要字后修改字体文件只保留用到的字。
现在找不到了。

补 ＃4
这里似乎有一份源码：
github.com/aui/font-spider/

意思是最佳实践是用系统字体？

ecomfe.github.io/blog/fontmin-getting-started/ 这个和上面的字蛛功能也差不多。但这种只适合固定内容，动态内容要么使用整个字体，或者使用云字体服务。

可以这样说。设计那边我都是建议不要在动态内容上使用特殊字体。

最佳实践是指什么场景？如果你需要适配各种安卓系统、Windows 、macOS 和 Linux 桌面，font-family 就写这些系统上都有的子集，优先考虑现代浏览器的话，最先写：ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;

就是优先显示系统的 UI 字体

目前我们的做法是，前端项目在登录页 or 落地页之类的，用户第一次进入的页面，写一个脚本提取这些页面中包含的所有中文，提取出字体文件中的这部分中文，然后这些页面直接使用这种字体文件，一般这个文件体积很小，对加载几乎无影响，然后异步加载完整的字体文件，并且在加载完成后用 indexeddb 存一下，设置为字体 A ，非首次进入的页面使用的字体设置为 A 、B ，优先加载自定义字体 A ，若没有会降级到系统字体 B ，基本上可以保证绝大部分用户无感加载字体

提取文字的脚本在流水线中打包前运行即可，无需人工维护

github.com/ecomfe/fontmin
这个也可以

＃10 大佬，不懂就问。那接口拉下来的文字怎么处理呢，这部分文字等完整字体拉下来之后，是不是依然会有字体闪的问题

之前收藏过一个链接，可以参考下捏《中文网络字体优化最佳实践》 chinese-font.netlify.app/zh-cn/post/performace_turbo/

中文字体太大了，一般就特殊用到的提取一下

这个东西有可能在 flutter web 中使用吗？ flutter web 由于无法使用系统字体，中文字体加载过慢目前是一个硬伤。

来来来
github.com/syhyz1990/mactype

动态内容怎么搞？

这事很值得说道，楼上的方法我都有使用。因为最近在手搓一个博客主题，我在里面放了 4 款自定义字体，经过优化以后 pagespeed 依然满分。

简单说下中文字体的优化过程：
1 、下载字体文件转 ttf 格式
2 、用 Fontmin 提取 3500 常用汉字，或 7000 通用汉字。一般 3500 足矣。
3 、用 cn-font-split 进行字体切片，切成大量 woff2 子集，以应对动态变化的字体。官网子集只能切成 75kb 大小，本地运行可以自定义子集大小，我切成平均 25kb 大小。
4 、再把 UI 中的静态字符，例如“主页”“返回”等，单独提取一个 UI 子集出来，并列出对应的 unicode 。5 、在 head 中给 UI 子集设置一条 preload ，确保 UI 字体提前加载。大量切片不能预加载。
6 、引入 fontface 并设置好 unicode 范围，再设置下 fontfamily 就可以了。

另外，以上是静态字体的处理方式，如果是可变字体，处理方式又有点不一样。你这款字体应该是静态，够用了。

这是我的处理后的字体仓库，里面有 3500 常用汉字 github.com/radishzzz/astro-theme-retypeset/tree/master/public/font

一般首次进入的页面，不太会有完全不可控的动态文字内容，因为你要保证用户首次进入网站时的加载速度，尽可能保证内容静态，而等到用户进入读取网站内容时，基本字体文件都加载好了，以后优先从 indexeddb 读取字体文件即可，不用重复网络加载了

当然如果有那种媒体流网站确实会有这种问题，首次进入的页面内容就是动态的，这种就老老实实用系统字体吧，哈哈

再补充一下：
1 、动态字体用 fonttools 的 pyftsubset 工具提取子集，需要在 subset.txt 内填入想要的字符。

2 、引入 fontface 时要设置 display:swap

3 、fontfamily 里 UI 子集需要放在切片子集的前面，这样的话，在 UI 子集里命中的字符，就不会在切片子集里再次查找。

4 、fontfamily 需要选用系统字体作为后备，可以参考 tailwind 里 sans 或者 serif 的预设。

ssshooter.com/font-optimization/

做成 app ，集成字体

＃14 刚刚点进这个网站，在其他页面点击左上角 icon 跳转首页一定会卡死，很奇怪