返回

hugo博客自定义字体

   
摘要GPT
文章介绍了如何在使用 hugo 博客的 stack 主题中自定义字体。首先提供了字体项目链接和 hugo 主题链接,然后详细说明了引入 css 和定义字体的步骤。最后还介绍了进阶操作,可以在不同页面使用不同的字体。整篇文章围绕着如何实现自定义字体展开,为读者提供了清晰易懂的指导。

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

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

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

喵闪字库: https://www.miao3.cn/

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;
}
知识共享许可证 CC BY-NC-SA 4.0
最后更新于 2024-06-15 23:43
使用 Hugo 构建
主题 hugo-magic小洋葱 魔改 由 Jimmy 设计
Written by Human, Not by AI