重新谈谈字体加载

之前有在 icepro 博客开发故事 里面有提到关于字体的内容，最终我还是换掉了这个方案。

字体加载模式

字体的加载模式在网上有诸多解释，这里我不多赘述了，字体主要分为：

1. 阻塞期
2. 交换期
3. 失败期

三个阶段，对此有提供一种比较简单的方法去控制字体的加载：font-display ¹

• auto
• block
• swap
• fallback
• optional

我们的字体包有一个比较大问题是相对较大 800k 左右，在整个页面初期加载的时候会有一个比较严重的 pending，并且会长时间占据渲染时间，这带来的问题就是会有一个比较长的白屏（文字空白）的情况。

也就是说即使按照其他文章的做法使用了 swap ²，由于文字大小的原因，也会显著的减慢整个页面的渲染，这是不能接受的。

字体分包功能

如果你用过 google font，那么你就会发现谷歌是有提供一种 swap 模式的字体载入方式比如：https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100..900&display=swap

查看源码就会发现是下面这种代码：

/* [4] */
@font-face {
  font-family: 'Noto Sans SC';
  font-style: normal;
  font-weight: 100 900;
  src: url(https://fonts.gstatic.com/s/notosanssc/v36/k3kXo84MPvpLmixcA63oeALhLIiP-Q-87KaAaH7rzeAODp22mF0qmF4CSjmPC6A0Rg5g1igg1w.4.woff2) format('woff2');
  unicode-range: U+1f1e9-1f1f5, U+1f1f7-1f1ff, U+1f21a, U+1f232, U+1f234-1f237, U+1f250-1f251, U+1f300, U+1f302-1f308, U+1f30a-1f311, U+1f315, U+1f319-1f320, U+1f324, U+1f327, U+1f32a, U+1f32c-1f32d, U+1f330-1f357, U+1f359-1f37e;
}
/* [5] */
@font-face {
  font-family: 'Noto Sans SC';
  font-style: normal;
  font-weight: 100 900;
  src: url(https://fonts.gstatic.com/s/notosanssc/v36/k3kXo84MPvpLmixcA63oeALhLIiP-Q-87KaAaH7rzeAODp22mF0qmF4CSjmPC6A0Rg5g1igg1w.5.woff2) format('woff2');
  unicode-range: U+fee3, U+fef3, U+ff03-ff04, U+ff07, U+ff0a, U+ff17-ff19, U+ff1c-ff1d, U+ff20-ff3a, U+ff3c, U+ff3e-ff5b, U+ff5d, U+ff61-ff65, U+ff67-ff6a, U+ff6c, U+ff6f-ff78, U+ff7a-ff7d, U+ff80-ff84, U+ff86, U+ff89-ff8e, U+ff92, U+ff97-ff9b, U+ff9d-ff9f, U+ffe0-ffe4, U+ffe6, U+ffe9, U+ffeb, U+ffed, U+fffc, U+1f004, U+1f170-1f171, U+1f192-1f195, U+1f198-1f19a, U+1f1e6-1f1e8;
}

这里比较核心的代码在于 unicode-range ³，利用这个特性可以分段的加载字体包更容易缩小字体包大小。

我现在用的字体目前也有现成的方案：

https://github.com/chawyehsu/lxgw-wenkai-webfont

我这边没使用它提供的 jsdelivr 使用的还是 cloudflare 提供的 jscdn： https://cdnjs.com/libraries/lxgw-wenkai-webfont 如果有小伙伴碰到了同样的问题，可以参考这个方案使用。

在博客中使用

直接修改前文中提到的 css variable：

:root {
  --headerFont: "LXGW WenKai";
  --bodyFont: "LXGW WenKai";
  --codeFont: "LXGW WenKai Mono";
  --strong-em-color-1: #1048ff;
  --strong-em-color-2: #14c8ff;
}

随后在 quartz/components/Head.tsx 中添加：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lxgw-wenkai-webfont/1.7.0/style.css" />

脚注

1. https://drafts.csswg.org/css-fonts/#font-display-desc ↩

2. https://brightzoe.top/docs/fe-basic/css/font-and-font-optimization ↩

3. https://www.zhangxinxu.com/wordpress/2016/11/css-unicode-range-character-font-face/ ↩

本文标题：重新谈谈字体加载

永久链接：https://iceprosurface.com/blog/font-load/

作者授权：本文由 icepro 原创编译并授权刊载发布。

版权声明：本文使用「署名-非商业性使用-相同方式共享 4.0 国际」创作共享协议，转载或使用请遵守署名协议。

查看源码：