之前有在 icepro 博客开发故事 里面有提到关于字体的内容,最终我还是换掉了这个方案。
字体加载模式
字体的加载模式在网上有诸多解释,这里我不多赘述了,字体主要分为:
- 阻塞期
- 交换期
- 失败期
三个阶段,对此有提供一种比较简单的方法去控制字体的加载:font-display 1
- auto
- block
- swap
- fallback
- optional
我们的字体包有一个比较大问题是相对较大 800k 左右,在整个页面初期加载的时候会有一个比较严重的 pending,并且会长时间占据渲染时间,这带来的问题就是会有一个比较长的白屏(文字空白)的情况。
也就是说即使按照其他文章的做法使用了 swap 2,由于文字大小的原因,也会显著的减慢整个页面的渲染,这是不能接受的。
字体分包功能
如果你用过 google font,那么你就会发现谷歌是有提供一种 swap 模式的字体载入方式比如:https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100..900&display=swap
查看源码就会发现是下面这种代码:
这里比较核心的代码在于 unicode-range 3,利用这个特性可以分段的加载字体包更容易缩小字体包大小。
我现在用的字体目前也有现成的方案:
https://github.com/chawyehsu/lxgw-wenkai-webfont
我这边没使用它提供的 jsdelivr 使用的还是 cloudflare 提供的 jscdn: https://cdnjs.com/libraries/lxgw-wenkai-webfont 如果有小伙伴碰到了同样的问题,可以参考这个方案使用。
在博客中使用
直接修改前文中提到的 css variable:
随后在 quartz/components/Head.tsx
中添加: