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