在网页嵌入 [中文] 字体的最佳实践是？

[liuidetmks]

系统肯定没得中文字体、

[SleepyRaven]

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

[zhuoyan]

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

[dzdh]

一个字体 36M 。


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

[MrUser]

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

[MrUser]

@MrUser
补 #4
这里似乎有一份源码：
https://github.com/aui/font-spider/

[liuidetmks]

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

[zhuoyan]

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

[zhuoyan]

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

[weeei]

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

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

[skallz]

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

[skallz]

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

[moooooooo]

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

[MingLovesLife]

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

[tsingwong]

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

[FightPig]

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

[ybz]

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

[ybz]

@SleepyRaven

[shiyuu]

来来来
https://github.com/syhyz1990/mactype

[lisxour]

@dzdh 动态内容怎么搞？

[radishzz]

这事很值得说道，楼上的方法我都有使用。因为最近在手搓一个博客主题，我在里面放了 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 常用汉字 https://github.com/radishzzz/astro-theme-retypeset/tree/master/public/font