cf1fc10b763df1f061cc4608337a6cc4.webp
有两种方法，一种是 下载字体 并上传到自己的项目中引用，一种是使用现成的 CDN 引用，我直接选择了 CDN 方式。

下来替换主题的默认模板和样式，进入 Hugo 内容管理的仓库根目录：

  1. 新建模板 layouts/partials/extend_head.html，设置内容：
<link rel="stylesheet" href="https://cdn.staticfile.org/lxgw-wenkai-screen-webfont/1.7.0/style.css" media="print" onload="this.media='all'">

这是七牛云的 CDN，更多的引用方式可以看看这个项目：chawyehsu/lxgw-wenkai-webfont

  1. 全局引用字体，新建 assets/css/extended/fonts.css，设置内容：
body,  
.post-content code {  
  font-family: "LXGW WenKai Screen", "Roboto", "PingFang SC", "Microsoft Yahei", sans-serif;  
}

设置完成，不过再扩展下里面涉及到的知识点：

  1. 异步加载 CSS，设置 link 标签属性
    • media="print" 在打印的时候加载该引用
    • onload="this.media='all'" 等页面加载完后在将 media 设置回去，即默认，这就会开始应用该 css
    • media 属性的详细用法请看：media types
  2. 在该 cdn 引用的 css 文件中，会有这么一个设置：
@font-face {  
  font-display: swap;  
}

font-display 表示加载 font-family 后面字体的规则：