系统肯定没得中文字体、
• 请不要在回答技术问题时复制粘贴 AI 生成的内容
This topic created in 625 days ago, the information mentioned may be changed or developed.
 |
1
字体切割，按需加载单个汉字
https://github.com/KonghaYao/cn-font-split |
1 |
dzdhFeb 21, 2025
3
一个字体 36M 。
我记得有个 js 可以收集当前网页里的中文字动态生成一个字体地址。 |
 |
MrUserFeb 21, 2025
4
以前有个叫 字蛛(FontSpider) 的挺好用：从 HTML 中找到需要字后修改字体文件只保留用到的字。
现在找不到了。 |
|
5
|
 |
6
@zhuoyan 意思是最佳实践是用系统字体？
|
 |
zhuoyanFeb 21, 2025
7
https://ecomfe.github.io/blog/fontmin-getting-started/ 这个和上面的字蛛功能也差不多。但这种只适合固定内容，动态内容要么使用整个字体，或者使用云字体服务。
|
|
zhuoyanFeb 21, 2025
8
@liuidetmks 可以这样说。设计那边我都是建议不要在动态内容上使用特殊字体。
|
 |
weeeiFeb 21, 2025
9
最佳实践是指什么场景？如果你需要适配各种安卓系统、Windows 、macOS 和 Linux 桌面，font-family 就写这些系统上都有的子集，优先考虑现代浏览器的话，最先写：ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
就是优先显示系统的 UI 字体 |
 |
10
目前我们的做法是，前端项目在登录页 or 落地页之类的，用户第一次进入的页面，写一个脚本提取这些页面中包含的所有中文，提取出字体文件中的这部分中文，然后这些页面直接使用这种字体文件，一般这个文件体积很小，对加载几乎无影响，然后异步加载完整的字体文件，并且在加载完成后用 indexeddb 存一下，设置为字体 A ，非首次进入的页面使用的字体设置为 A 、B ，优先加载自定义字体 A ，若没有会降级到系统字体 B ，基本上可以保证绝大部分用户无感加载字体
|
 |
mooooooooFeb 21, 2025
12
|
 |
MingLovesLifeFeb 21, 2025
13
@skallz #10 大佬，不懂就问。那接口拉下来的文字怎么处理呢，这部分文字等完整字体拉下来之后，是不是依然会有字体闪的问题
|
 |
14
之前收藏过一个链接，可以参考下捏《中文网络字体优化最佳实践》 https://chinese-font.netlify.app/zh-cn/post/performace_turbo/
|
 |
FightPigFeb 21, 2025
15
中文字体太大了，一般就特殊用到的提取一下
|
 |
16
这个东西有可能在 flutter web 中使用吗？ flutter web 由于无法使用系统字体，中文字体加载过慢目前是一个硬伤。
|
|
17
|
 |
shiyuuFeb 21, 2025
18
|
 |
20
这事很值得说道，楼上的方法我都有使用。因为最近在手搓一个博客主题，我在里面放了 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 |
|
skallzFeb 21, 2025
21
@MingLovesLife 一般首次进入的页面，不太会有完全不可控的动态文字内容，因为你要保证用户首次进入网站时的加载速度，尽可能保证内容静态，而等到用户进入读取网站内容时，基本字体文件都加载好了，以后优先从 indexeddb 读取字体文件即可，不用重复网络加载了
|
|
skallzFeb 21, 2025
22
@MingLovesLife 当然如果有那种媒体流网站确实会有这种问题，首次进入的页面内容就是动态的，这种就老老实实用系统字体吧，哈哈
|
|
23
再补充一下：
1 、动态字体用 fonttools 的 pyftsubset 工具提取子集，需要在 subset.txt 内填入想要的字符。 2 、引入 fontface 时要设置 display:swap 3 、fontfamily 里 UI 子集需要放在切片子集的前面，这样的话，在 UI 子集里命中的字符，就不会在切片子集里再次查找。 4 、fontfamily 需要选用系统字体作为后备，可以参考 tailwind 里 sans 或者 serif 的预设。 |
 |
ssshooterFeb 21, 2025
24
|
 |
bybyFeb 21, 2025
25
做成 app ，集成字体
|
 |
xiaoming1992Feb 21, 2025
26
@tsingwong #14 刚刚点进这个网站，在其他页面点击左上角 icon 跳转首页一定会卡死，很奇怪
|
 |
tt2020Feb 21, 2025
27
|
 |
XatFeb 21, 2025
28
我看看哈，你其实起得差不多了。
|
 |
jchnxuFeb 21, 2025
29
朋友们。这种按照 subset 加载 google font 倒是可以做。也就是咱们可以自己手搓一个 google fonts 出来吗？
|
 |
imtflinFeb 21, 2025
30
字体子集化，我之前所在的公司做的海报编辑器，就需要使用这种技术
|
Select Language