hugo博客自定义字体

提示：适用stack主题，其他主题没测试过，用法应该大同小异,主题默认字体:Lato

字体项目：https://github.com/KonghaYao/chinese-free-web-font-storage

中文网字计划： https://chinese-font.netlify.app/cdn/

hugo主题：https://github.com/CaiJimmy/hugo-theme-stack

1、引入CSS样式

如果没有custom.html可以创建

在 /layouts/partials/head/custom.html 中加入以下代码：

<link rel="stylesheet" href="https://npm.elemecdn.com/lxgw-wenkai-screen-webfont@1.7.0/lxgwwenkaiscreen.css" /> 
<link rel="stylesheet" href="https://s1.hdslb.com/bfs/static/jinkela/long/font/regular.css" />

上面代码表示可以使用这些字体: HarmonyOS_Regular,LXGW WenKai Screen

2、定义字体

再在 /assets/scss/custom.scss 中加入以下代码：

// 文章页字体
body, .article-content {
    font-family: "LXGW WenKai Screen", sans-serif;
}

假如你想使用HarmonyOS_Regular字体,那就把LXGW WenKai Screen改成HarmonyOS_Regular即可,然后查看是否满意。

3、进阶

在 /assets/scss/custom.scss 中加入以下代码：

以下代码表示在文章页、标题、首页，分别使用不同的字体

// 文章页字体
body, .article-content {
    font-family: "LXGW WenKai Screen", sans-serif;
}

// 标题字体
body, .article-title {
    font-family: "LXGW WenKai Screen", sans-serif;
}


// 首页字体
body, .article-page {
    font-family: "HarmonyOS_Regular", sans-serif;
}