食用本博客同款字体：

@font-face {
  font-family: "nexzhu";
  src: local('PingFang SC'),local('Hiragino Sans GB'),local('Microsoft YaHei'),url(https://cdn.jsdelivr.net/gh/gogobody/Modify_Joe_Theme@4.8.3/assets/fonts/blockdole.woff2) format("woff2"),
  url(https://cdn.jsdelivr.net/gh/gogobody/Modify_Joe_Theme@4.8.3/assets/fonts/blockdole.woff) format("woff"),
  url(https://cdn.jsdelivr.net/gh/gogobody/Modify_Joe_Theme@4.8.3/assets/fonts/blockdole.eot) format("embedded-opentype");
  font-display: swap;
}
body {font-family: nexzhu!important;}

优化说明

font-display: swap;

swap告诉浏览器使用字体的文本应立即使用系统字体显示。自定义字体准备好后，它将替换系统字体。避免显示隐形文字。

预加载网页字

用于更早获取字体文件。要开启此优化，需在博客 head 中插入一下代码。比如：

<!-- laod fonts -->
<link rel="preload" href="https://cdn.jsdelivr.net/gh/gogobody/Modify_Joe_Theme@4.8.3/assets/fonts/blockdole.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="https://cdn.jsdelivr.net/gh/gogobody/Modify_Joe_Theme@4.8.3/assets/fonts/blockdole.woff" as="font" type="font/woff2" crossorigin>

as = "font" type =" font / woff2" 属性告诉浏览器以字体形式下载此资源，并有助于确定资源队列的优先级。

crossorigin 属性指示是否应该使用CORS请求获取资源，因为字体可能来自不同的域。如果没有这个属性，预加载的字体将被浏览器忽略。