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

[liuidetmks]

系统肯定没得中文字体、

[skallz]

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

[skallz]

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

[radishzz]

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

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

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

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

[ssshooter]

https://ssshooter.com/font-optimization/

[byby]

做成 app ，集成字体

[xiaoming1992]

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

[tt2020]

可以参考这个： https://chinese-font.netlify.app/zh-cn/online-split/

利用 CSS 里 unicode-range 属性定义字符，加载对应字体

[Xnor]

我看看哈，你其实起得差不多了。

[jchnxu]

朋友们。这种按照 subset 加载 google font 倒是可以做。也就是咱们可以自己手搓一个 google fonts 出来吗？

[imtflin]

字体子集化，我之前所在的公司做的海报编辑器，就需要使用这种技术